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

时间：2021-01-08 20:09:24

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

numberbox(数值输入框)

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

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

相关文章