webapp是基于html5网页版的app，经常会结合app成为混合模式 hybrid app，也就是 app小应用打开 访问的其实是网页，这种方式非常不错，解决了app更新的难题， 所以这个时候要求 webapp需要做的非常像原生app一样。
下面是切图网（qietu.com）在实际项目中碰到一个问题，关于 input 只能输入数字和小数点后俩位的验证。下面js代码亲测有效，目前已在项目中使用。
//jquery控制只输入数字或小数点后几位
$(function(){
// JavaScript Document
$.fn.decimalinput = function(num) {
$(this).css("ime-mode", "disabled");
this.bind("keypress", function(e) {
if (e.charCode === 0) return true; //非字符键 for firefox
var code = (e.keyCode ? e.keyCode : e.which); //兼容火狐 IE
if (code >= 48 && code <= 57) {
var pos = getCurPosition(this);
var selText = getSelectedText(this);
var dotPos = this.value.indexOf(".");
if (dotPos > 0 && pos > dotPos) {
if (pos > dotPos + 2) return false;
if (selText.length > 0 || this.value.substr(dotPos + 1).length < num)
return true;
else
return false;
}
return true;
}
//输入"."
if (code == 46) {
var selText = getSelectedText(this);
if (selText.indexOf(".") > 0) return true; //选中文本包含"."
else if (/^[0-9]+\.$/.test(this.value + String.fromCharCode(code)))
return true;
}
return false;
});
this.bind("blur", function() {
if (this.value.lastIndexOf(".") == (this.value.length - 1)) {
this.value = this.value.substr(0, this.value.length - 1);
} else if (isNaN(this.value)) {
this.value = "";
}
if (this.value)
this.value = parseFloat(this.value).toFixed(2);
$(this).trigger("input");
});
this.bind("paste", function() {
if (window.clipboardData) {
var s = clipboardData.getData('text');
if (!isNaN(s)) {
value = parseFloat(s);
return true;
}
}
return false;
});
this.bind("dragenter", function() {
return false;
});
this.bind("keyup", function() {
});
this.bind("propertychange", function(e) {
if (isNaN(this.value))
this.value = this.value.replace(/[^0-9\.]/g, "");
});
this.bind("input", function(e) {
if (isNaN(this.value))
this.value = this.value.replace(/[^0-9\.]/g, "");
});
};
//获取当前光标在文本框的位置
function getCurPosition(domObj) {
var position = 0;
if (domObj.selectionStart || domObj.selectionStart == '0') {
position = domObj.selectionStart;
}
else if (document.selection) { //for IE
domObj.focus();
var currentRange = document.selection.createRange();
var workRange = currentRange.duplicate();
domObj.select();
var allRange = document.selection.createRange();
while (workRange.compareEndPoints("StartToStart", allRange) > 0) {
workRange.moveStart("character", -1);
position++;
}
currentRange.select();
}
return position;
}
//获取当前文本框选中的文本
function getSelectedText(domObj) {
if (domObj.selectionStart || domObj.selectionStart == '0') {
return domObj.value.substring(domObj.selectionStart, domObj.selectionEnd);
}
else if (document.selection) { //for IE
domObj.focus();
var sel = document.selection.createRange();
return sel.text;
}
else return '';
}
//$('#fe3').decimalinput(2);
})
关于html5原生配合
一个是 type=number （原生h5自带）
控制手机端默认弹出 数字输入键盘
一个是 step=0.01 （原生 h5 自带）
控制输入框的数字跨度，0.01 代表可以输入 数字和小数点后俩位
切图社区（qietu.cn）原创。