動態修改input元素type屬性值
本章節通過程式碼例項介紹一下如何動態修改input元素的type屬性值。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{display:none;} </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("#showPwd").focus(function(){ $(this).attr('type','password'); }); }) </script> </head> <body> <input name="pw" type="text" id="showPwd" value="輸入密碼"/> </body> </html>
程式碼會報錯Uncaught Error: type property can't be changed。
更換一個思路實現此效果,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("#showPwd").focus(function(){ var text_value=$(this).val(); if(text_value==this.defaultValue) { $("#showPwd").hide(); $("#pw").show().focus(); } }); $("#password").blur(function(){ var text_value=$(this).val(); if(text_value=="") { $("#showPwd").show(); $("#pw").hide(); } }); }) </script> </head> <body> <input name="password" type="password" id="pw" style="display: none;" /> <input type="text" id="showPwd" value="請輸入密碼" /> </body> </html>
不是更換type屬性值,而是文字框和密碼框隱藏和顯示的切換。
密碼框提示語無需採用上面方式,可以用placeholder屬性,參閱HTML input password密碼框一章節。
相關文章
- jQuery type屬性值篩選input元素jQuery
- css匹配type屬性值為text的input元素CSS
- js通過type屬性值篩選input元素程式碼例項JS
- 更改input的type屬性
- js根據input標籤的type屬性篩選元素JS
- jQuery動態新增或刪除<input type="file">元素jQuery
- JavaScript如何動態修改img的src屬性值JavaScript
- jQuery動態修改連結的href屬性值jQuery
- JavaScript 通過 type 屬性值獲取表單元素JavaScript
- html元素,屬性修改HTML
- 動態修改Shape的solid屬性的color值Solid
- js如何獲取某一類type屬性值表單元素JS
- css設定具有指定type屬性值的input文字框的樣式CSS
- 動態生成HTML元素併為元素追加屬性HTML
- 修改追加屬性的值
- 修改input標籤type=file型別按鈕的值型別
- jquery改變元素屬性值jQuery
- textarea 多行文字域 type 屬性值
- vue動態(type可變)input繫結Vue
- Java 反射修改類的常量值、靜態變數值、屬性值Java反射變數
- jQuery如何修改元素的屬性jQuery
- jQuery動態建立html元素並設定屬性jQueryHTML
- js動態設定input文字框的readonly屬性JS
- mybatis Selective動態判斷屬性值新增或修改操作,batch批次操作MyBatis
- jquery動態新增和刪除<input type="file" />jQuery
- jQuery匹配指定type型別input元素jQuery型別
- 如何清除<input type="file">的值
- v-bind 動態更新 HTML 元素上的屬性HTML
- Blob type 屬性
- File type 屬性
- jQuery如何設定元素的屬性值jQuery
- css匹配具有指定屬性值的元素CSS
- jQuery不能修改input輸入框typejQuery
- JavaScript修改連結a的href屬性值JavaScript
- <input> readonly屬性
- jQuery點選元素獲取此元素的id屬性值jQuery
- 設定和獲取元素固有屬性值
- JavaScript使用name屬性值獲取元素物件JavaScript物件