給禁用的input標籤賦值

2021-09-23 20:17:06 字數 1242 閱讀 9532

input標籤大家都知道,是可以自己輸入值的,但有些時候,需要把input標籤禁用,就不能自己輸入值了,還要動態的給它賦值,這個效果在做專案中也是會遇到的,專案有這個需求,我們就需要實現它。下面就來看看如何給禁用的input標籤賦值。

1、話不多說,先簡單把頁面搭建好。**如下圖所示:

可以看到就是簡單的兩個input標籤,如何分別給上id和預設值,其中乙個給上disabled屬性,就是將其禁用了。效果如下圖所示:

2、下面我們就要通過乙個鍵盤事件,來給禁用的input標籤賦值。直接看**如下圖所示:

就是簡單的一小段**,就能給禁用的input標籤賦值。通過鍵盤彈起事件keyup(),然後獲取到輸入值的input標籤的val(),再將它賦值給禁用的input標籤就可以了。

效果如下圖所示:

上面這個例子是兩個input標籤,所以賦值的時候也就比較方便簡單,但是當要乙個下拉框選擇的時候給input賦值就會複雜那麼一些了,下面下面就來看看。

3、搭建好頁面,**如下圖所示:

還是簡單的搭建,乙個input標籤和select標籤。給上各自的id。效果如下圖所示:

接下來就再直接看js**,如何獲取到select標籤選項的值,再賦值給禁用的input標籤。

**如下圖所示:

這次是通過select標籤的值改變事件change(),來給input標籤賦值,首先要獲取到select的val(),再通過select的val(),來獲取到選項的text(),最後就是賦值給input標籤。

效果如下圖所示:

這樣就實現將select標籤的選擇賦值給禁用的input標籤了,以上兩個例子就是給禁用的input標籤賦值,當然除了這兩個例子以外肯定還有其他的,例如你也可以將上面兩個例子連線起來,將input標籤輸入的值作為select標籤的選項,然後就能通過select的標籤的值改變事件,動態賦值給禁用的input標籤,這就更完善了這個功能。關於input標籤還有很多應用和功能,只要多去思考,都有可能實現。

動態給meta標籤賦值

最近專案遇到需求 動態給meta標籤賦值。剛開始,我使用了jquery動態新增標籤的方式,如 var keywords if null else var describtion if null else結果 在瀏覽器使用 檢查 可以看到效果,但是在 檢視網頁原始碼 項找不到對應的meta標籤。原因 ...

jquery 給select標籤賦值

input input name 名稱 if input 0 type hidden input.hasclass combobox value 其中 input name 名稱 是獲取表單的值可能為input select radio等形式。獲取到combobox以後便可以給其賦setvalue的...

Input標籤禁用與Css動態樣式繫結

input標籤存在乙個disabled屬性,可以用來禁用此標籤,通常還可以對這個屬性進行禁用後的樣式修改 一般裡面對應乙個bool屬性,表示是否禁用標籤,而樣式修改可以在css中自己設定 通常寫法如下例所示 input disabled class指令只能繫結要給css類 class.樣式類名稱 布...