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

2022-10-17 20:45:32 发布:网友投稿 来源：网友投稿
热度:110

在做网页开发时，我们经常会引入Jquery脚本库，方便对html做各种操作。下面我们一起来看下Jquery对输入框控件能做哪些操作？

操作方法

  • 01

    要用Jquery进行dom操作，首先我们得要在页面引入脚本文件，如图

  • 02

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

  • 03

    Html初始运行界面如图，

  • 04

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

  • 05

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

  • 06

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

  • 07

    点击第二个按钮，我们读取到了输入框的值，然后把结果显示在alert弹出框里。

  • 08

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

  • 09

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

  • 10

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

下一篇：Navicat如何同步两个不同数据库之间的表？
上一篇：怎么计算两个日期之间的天数、月数、年数