使用Jquery如何操作输入框控件？ _小知识

在做网页开发时，我们经常会引入Jquery脚本库，方便对html做各种操作。下面我们一起来看下Jquery对输入框控件能做哪些操作？操作方法 01 要用Jquery进行dom操作，首先我们得要在页面引入脚本文件，如图

02 我们的例子里， Html代码很简单，就是一个input输入框，和几个按钮，如图

03 Html初始运行界面如图，

04 我们先为第一个按钮添加点击事件，点击后，通过Jquery设置输入框的值，
主要是通过Jquery的 val()方法来实现。
("#txtInput").val('你需要的值');
代码如图，

05 点击按钮后，我们可以看到，输入框的值已经被设置上了。

06 Jquery既然能设置输入框的值，当然也能读取它的值了。
这次添加第二个按钮的事件代码，如图。
这里也是用Jquery的 val()方法来读取，当我们在这个方法里加上参数时，就是设置值，不加参数时，就是读取值。

07 【使用Jquery如何操作输入框控件？】点击第二个按钮，我们读取到了输入框的值，然后把结果显示在alert弹出框里。

08 接着，我们添加第三个按钮的代码，主要是通过Jquery的 prop方法来设置输入框的属性，
("#txtInput").prop('disabled', true);
设置了disabled属性为 true ，则输入框是不可用状态，即不能输入值，也不能选中这个输入框了。

09 刷新页面，重新运行后，点击第三个按钮后，效果如图，输入框已是不可用状态。

10 最后看下设置readonly的代码，这里也是同样用prop方法，来设置输入框的readonly属性。这个属性和前面的disabled有什么不一样？readonly设置了后，输入框不能输入值，但能选中，并且能复制里面的值。界面上看，和正常的输入框是一样的，不过当你要输入值时，却发现是输入不了的，原来的值是改不了的。

使用Jquery如何操作输入框控件？

猜你喜欢