使用Jquery如何操作輸入框控件?

在做網頁開發時,我們經常會引入Jquery腳本庫,方便對html做各種操作。下面我們一起來看下Jquery對輸入框控件能做哪些操作?

操作方法

(01)要用Jquery進行dom操作,首先我們得要在頁面引入腳本文件,如圖

使用Jquery如何操作輸入框控件?

(02)我們的例子裏,Html代碼很簡單,就是一個input輸入框,和幾個按鈕,如圖

使用Jquery如何操作輸入框控件? 第2張

(03)Html初始運行界面如圖,

使用Jquery如何操作輸入框控件? 第3張

(04)我們先爲第一個按鈕添加點擊事件,點擊後,通過Jquery設置輸入框的值,主要是通過Jquery的 val()方法來實現。$("#txtInput")('你需要的值');代碼如圖,

使用Jquery如何操作輸入框控件? 第4張

(05)點擊按鈕後,我們可以看到,輸入框的值已經被設置上了。

使用Jquery如何操作輸入框控件? 第5張

(06)Jquery既然能設置輸入框的值,當然也能讀取它的值了。這次添加第二個按鈕的事件代碼,如圖。這裏也是用Jquery的 val()方法來讀取, 當我們在這個方法里加上參數時,就是設置值,不加參數時,就是讀取值。

使用Jquery如何操作輸入框控件? 第6張

(07)點擊第二個按鈕,我們讀取到了輸入框的值,然後把結果顯示在alert彈出框裏。

使用Jquery如何操作輸入框控件? 第7張

(08)接着,我們添加第三個按鈕的代碼,主要是通過Jquery的 prop方法來設置輸入框的屬性,$("#txtInput")('disabled', true);設置了disabled屬性爲 true,則輸入框是不可用狀態,即不能輸入值,也不能選中這個輸入框了。

使用Jquery如何操作輸入框控件? 第8張

(09)刷新頁面,重新運行後,點擊第三個按鈕後,效果如圖,輸入框已是不可用狀態。

使用Jquery如何操作輸入框控件? 第9張

(10)最後看下設置readonly的代碼,這裏也是同樣用prop方法,來設置輸入框的readonly屬性。這個屬性和前面的disabled有什麼不一樣?readonly設置了後,輸入框不能輸入值,但能選中,並且能複製裏面的值。界面上看,和正常的輸入框是一樣的,不過當你要輸入值時,卻發現是輸入不了的,原來的值是改不了的。代碼和效果如圖

使用Jquery如何操作輸入框控件? 第10張
使用Jquery如何操作輸入框控件? 第11張