使用Jquery如何操作輸入框控件？
在做網頁開發時，我們經常會引入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設置了后，輸入框不能輸入值，但能選中，并且能復制里面的值。界面上看，和正常的輸入框是一樣的，不過當你要輸入值時，卻發現是輸入不了的，原來的值是改不了的。
代碼和效果如圖 - End
- 發表于 2017-09-03 00:00
- 閱讀 ( 807 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章