（亲测可用）input只能输入数字或小数点后几位

webapp是基于html5网页版的app，常常会结合app成为混合模式 hybrid app，也就是 app小应用打开 访问的实则是网页，这种方式超级不错，解决了app更新的难题， 所以这个时候要求 webapp需要做的超级像原生app一样。

下面是切图网（qietu.com）在实际项目中碰到一个问题，关于 input 只能输入数字和小数点后俩位的验证。下面js代码亲测有效，目前已在项目中使用。

1. //jquery控制只输入数字或小数点后几位

2. $(function(){

4. // JavaScript Document

5. $.fn.decimalinput = function(num) {

6. $(this).css(“ime-mode”, “disabled”);

7. this.bind(“keypress”, function(e) {

8. if (e.charCode === 0) return true; //非字符键 for firefox

9. var code = (e.keyCode ? e.keyCode : e.which); //兼容火狐 IE

10. if (code >= 48 && code <= 57) {

11. var pos = getCurPosition(this);

12. var selText = getSelectedText(this);

13. var dotPos = this.value.indexOf(“.”);

14. if (dotPos > 0 && pos > dotPos) {

15. if (pos > dotPos + 2) return false;

16. if (selText.length > 0 || this.value.substr(dotPos + 1).length < num)

17. return true;

18. else

19. return false;

20. }

21. return true;

22. }

23. //输入”.”

24. if (code == 46) {

25. var selText = getSelectedText(this);

26. if (selText.indexOf(“.”) > 0) return true; //选中文本包含”.”

27. else if (/^[0-9]+.$/.test(this.value + String.fromCharCode(code)))

28. return true;

29. }

30. return false;

31. });

32. this.bind(“blur”, function() {

33. if (this.value.lastIndexOf(“.”) == (this.value.length – 1)) {

34. this.value = this.value.substr(0, this.value.length – 1);

35. } else if (isNaN(this.value)) {

36. this.value = “”;

37. }

38. if (this.value)

39. this.value = parseFloat(this.value).toFixed(2);

40. $(this).trigger(“input”);

41. });

42. this.bind(“paste”, function() {

43. if (window.clipboardData) {

44. var s = clipboardData.getData('text');

45. if (!isNaN(s)) {

46. value = parseFloat(s);

47. return true;

48. }

49. }

50. return false;

51. });

52. this.bind(“dragenter”, function() {

53. return false;

54. });

55. this.bind(“keyup”, function() {

56. });

57. this.bind(“propertychange”, function(e) {

58. if (isNaN(this.value))

59. this.value = this.value.replace(/[^0-9.]/g, “”);

60. });

61. this.bind(“input”, function(e) {

62. if (isNaN(this.value))

63. this.value = this.value.replace(/[^0-9.]/g, “”);

64. });

65. };

67. //获取当前光标在文本框的位置

68. function getCurPosition(domObj) {

69. var position = 0;

70. if (domObj.selectionStart || domObj.selectionStart == '0') {

71. position = domObj.selectionStart;

72. }

73. else if (document.selection) { //for IE

74. domObj.focus();

75. var currentRange = document.selection.createRange();

76. var workRange = currentRange.duplicate();

77. domObj.select();

78. var allRange = document.selection.createRange();

79. while (workRange.compareEndPoints(“StartToStart”, allRange) > 0) {

80. workRange.moveStart(“character”, -1);

81. position++;

82. }

83. currentRange.select();

84. }

85. return position;

86. }

87. //获取当前文本框选中的文本

88. function getSelectedText(domObj) {

89. if (domObj.selectionStart || domObj.selectionStart == '0') {

90. return domObj.value.substring(domObj.selectionStart, domObj.selectionEnd);

91. }

92. else if (document.selection) { //for IE

93. domObj.focus();

94. var sel = document.selection.createRange();

95. return sel.text;

96. }

97. else return '';

98. }

100. //$('#fe3').decimalinput(2);

101. })

关于html5原生配合

1. <input id=”fe3″ type=”number” step=”0.01″ placeholder=”请输入充值金额” id=”” value=”” />

一个是 type=number （原生h5自带）

控制手机端默认弹出 数字输入键盘

一个是 step=0.01 （原生 h5 自带）

控制输入框的数字跨度，0.01 代表可以输入 数字和小数点后俩位

切图社区（qietu.cn）原创。