多种模式
文本框有3种模式:文本、密码、多行。
- 结构
<div> <label for="text-box-normal">文本框</label> <input id="text-box-normal" data-ui-id="text-box-normal" data-ui-type="TextBox" data-ui-mode="text" /> </div> <div> <label for="text-box-password">密码框</label> <input id="text-box-password" data-ui-id="text-box-password" data-ui-type="TextBox" data-ui-mode="password" /> </div> <div> <label for="text-box-textarea">多行文本框</label> <textarea id="text-box-textarea" data-ui-id="text-box-textarea" ata-ui-type="TextBox" data-ui-mode="textarea"></textarea> </div>
前后缀提示
使用hint
和hintType
属性灵活定义前后缀式的提示信息。
- 结构
<div> <label for="text-box-prefix">您的博客:</label> <input id="text-box-prefix" data-ui-type="TextBox" data-ui-hint="http://" data-ui-hint-type="prefix" /> </div> <div> <label for="text-box-suffix">宽度</label> <input id="text-box-suffix" data-ui-type="TextBox" data-ui-hint="px" data-ui-hint-type="suffix" /> </div>
输入提示
使用placeholder
属性为文本框加上输入提示信息。
- 结构
<input id="text-box-with-placeholder" placeholder="使用placeholder属性" data-ui-id="text-box-with-placeholder" data-ui-type="TextBox" data-ui-mode="text" />
输入监听
使用input
事件监听输入的内容。
- 结构
- 脚本
<input id="text-box-with-input-listener" placeholder="使用placeholder属性" data-ui-id="text-box-with-input-listener" data-ui-type="TextBox" data-ui-mode="text" /> <label id="left-length-hint" for="text-box-with-input-listener">还可以输入40个字符</label>
var maxLength = 40; var textbox = require('esui').get('text-box-with-input-listener'); var label = document.getElementById('left-length-hint'); textbox.on( 'input', function () { var value = this.getValue(); var leftLength = maxLength - value.length; if (leftLength > 0) { label.innerHTML = '还可以输入' + leftLength + '个字符'; label.className = ''; } else { label.innerHTML = '已经超出了' + (-leftLength) + '个字符'; label.className = 'invalid'; } } );