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中文网：

TopJUI前端框架：

TopJUI交流社区：