TextBox

多种模式

文本框有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>

前后缀提示

使用hinthintType属性灵活定义前后缀式的提示信息。

  • 结构
<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';
        }
    }
);