jquery获取input的输入值;javascript获取input的值 收藏 0

jQuery 获取和设置HTML元素

jQuery 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。

text() 方法可以用于设置或获取所选元素的文本内容。

例如我们获取下列 <p> 标签中的文本内容：

在浏览器中演示效果：

除了获取文本内容，text() 还可以用于设置文本内容，我们可以来看一下。

例如通过 text() 将 .content 的文本内容设置为 hello, xkd!：

在浏览器中演示效果：

html() 方法用于设置或返回所选元素的内容（包括HTML标记）。

通过 html() 方法获取 p 元素的内容：

在浏览器中演示效果：

除此之外，我们还可以使用 html() 方法来设置指定元素的内容：

在浏览器中演示效果：

val() 用于设置或返回表单字段的值。该方法大多时候用于 input 元素。

例如获取输入框 input 中的值：

在浏览器中演示效果：

如果要使用 val() 方法设置 value 的值，我们可以像下面这样做：

在浏览器中演示效果：

attr() 方法用于设置或返回被选元素的属性值。

例如下面这个例子：

在浏览器中演示效果：

attr() 方法除了获取元素的属性值，还可以设置元素的属性值，我们来看一下。

将下面 <div> 标签中的 class 属性的值设置为 summer：

在浏览器中演示效果：

链接：https://www.9xkd.com/

（亲测可用）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=\”请输入充值金额\” class=\”txt nojs\” name=\”\” id=\”\” value=\”\” />

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

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

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

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

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

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com