jQuery EasyUI/TopJUI基本的数字输入框（保留两位小数，带前缀后缀...）

jQuery EasyUI/TopJUI基本的数字输入框（保留两位小数，带前缀后缀...）

numberbox(数值输入框)

HTML

required:必填字段，默认为false；prompt：显示在输入框的提示性文字；min/miax:最小/最大值；
precision：保留的小数位数；prefix:'￥'：带前缀；suffix:'$'：带后缀；groupSeparator:','字符分割整数组

　　

    <fieldset>
        <legend>基本数字输入框</legend>
    </fieldset>

    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">年龄</label>
            <div class="topjui-input-block">
                <input type="text" name="age" data-toggle="topjui-numberbox">   //自然数
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">工龄</label>
            <div class="topjui-input-block">
                <input type="text" name="gonglin" data-toggle="topjui-numberbox"
                       data-options="required:true,prompt:'工龄是必填字段'">    
                </td>
            </div>
        </div>
    </div>

    <fieldset>
        <legend>最大最小值限制</legend>
    </fieldset>

    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">年龄</label>
            <div class="topjui-input-block">
                <input type="text" name="age" data-toggle="topjui-numberbox"
                       data-options="min:18,max:120,prompt:'输入范围18至120之间'">
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">工龄</label>
            <div class="topjui-input-block">
                <input type="text" name="gonglin" data-toggle="topjui-numberbox"
                       data-options="required:true,min:1,max:60,prompt:'输入范围1到60之间'">
                </td>
            </div>
        </div>
    </div>

    <fieldset>
        <legend>带精度的数值输入框</legend>
    </fieldset>

    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">年龄</label>
            <div class="topjui-input-block">
                <input type="text" name="age" data-toggle="topjui-numberbox"
                       data-options="precision:2,prompt:'保留2位小数'">
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">工龄</label>
            <div class="topjui-input-block">
                <input type="text" name="gonglin" data-toggle="topjui-numberbox"
                       data-options="precision:1,prompt:'保留1位小数'">
                </td>
            </div>
        </div>
    </div>

    <fieldset>
        <legend>带标识的数值输入框</legend>
    </fieldset>

    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">工资</label>
            <div class="topjui-input-block">
                <input type="text" name="age" data-toggle="topjui-numberbox"
                       data-options="prefix:'￥',prompt:'带前缀的输入'">
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">奖金</label>
            <div class="topjui-input-block">
                <input type="text" name="gonglin" data-toggle="topjui-numberbox"
                       data-options="suffix:'$',prompt:'带后缀的输入'">
            </div>
        </div>
    </div>

    <fieldset>
        <legend>带格式化的数值输入框</legend>
    </fieldset>

    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">工资</label>
            <div class="topjui-input-block">
                <input type="text" name="age" data-toggle="topjui-numberbox"
                       data-options="groupSeparator:',',prompt:'输入123456789试试'">
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">奖金</label>
            <div class="topjui-input-block">
                <input type="text" name="gonglin" data-toggle="topjui-numberbox"
                       data-options="groupSeparator:',',precision:2,prompt:'输入1234567.89试试'">
            </div>
        </div>
    </div>
</div>

　　js

<input type="text" id="nn">

$('#nn').iNumberbox({
    min:0,
    precision:2
});

　　设置输入框的值

$('#nn').iNumberbox('setValue', 206.12);

　　获取输入框的值

var v = $('#nn').iNumberbox('getValue');
alert(v);

　　

EasyUI中文网：http://www.jeasyui.cn

TopJUI前端框架：http://www.topjui.com

TopJUI交流社区：http://ask.topjui.com