今天寫了一個(gè)表單元素，在用戶點(diǎn)擊的時(shí)候會(huì)清空input中的內(nèi)容，當(dāng)鼠標(biāo)點(diǎn)擊其他地方的時(shí)候會(huì)把輸入的值保存為input的value值

類似于這樣的效果

當(dāng)用戶點(diǎn)擊的時(shí)候文字消失。

html代碼

<input type="text" name="" value="請(qǐng)輸入您的郵箱地址"/><input type="text" name="" value="請(qǐng)輸入用戶名"/><input class="pwd" type="text" name="" value="請(qǐng)輸入密碼"/><input class="pwd" type="text" name="" value="確認(rèn)密碼"/>jq代碼
<script type="text/javascript">$(document).ready(function(e) {var temp;$(":text").focusin(function(){var value = $(this).val();if ($(this).val() == "請(qǐng)輸入密碼" || $(this).val() == "請(qǐng)輸入您的郵箱地址" || $(this).val() == "確認(rèn)密碼" || $(this).val() =="請(qǐng)輸入用戶名") { if($(this).val() == "確認(rèn)密碼" || $(this).val() == "請(qǐng)輸入密碼") {$(this).attr('type','password')}$(this).val("")}//alert(value)})$(":input").focusout(function(event) {/* Act on the event */if($(this).val() == "") { if ($(this).hasClass('pwd')) {$(this).attr('type','text')};$(this).val(temp)}});})</script>

這樣之后基本所要求的功能可以實(shí)現(xiàn)，但是發(fā)現(xiàn)代碼不夠優(yōu)雅，于是又想到了可以使用數(shù)組來保存value值，

var arr_ = [];var temp;$(":text").each(function() {arr_.push($(this).val())})$(":text").focusin(function(){var that = this;var value = $(that).val();temp = value;$.each(arr_,function(i,n) {if(value==n){$(that).val("");if(value=="請(qǐng)輸入密碼"||value=="確認(rèn)密碼"){$(that).attr("type","password");}}});})
又發(fā)現(xiàn)了一個(gè)問題， 總是需要一個(gè)全局變量temp來保存value值，這對(duì)于javascript來說是不好的，于是乎又想到了data屬性

<input type="text" name="" data="請(qǐng)輸入您的郵箱地址" value="請(qǐng)輸入您的郵箱地址"/><input type="text" name="" data="請(qǐng)輸入用戶名" value="請(qǐng)輸入用戶名"/><input class="pwd" type="text" data="請(qǐng)輸入密碼" name="" value="請(qǐng)輸入密碼"/><input class="pwd" type="text" data="確認(rèn)密碼" name="" value="確認(rèn)密碼"/>
$(document).ready(function(e) {var arr_ = [];$(":text").each(function() {arr_.push($(this).val())})$(":text").focusin(function(){var that = this;var value = $(that).val();$.each(arr_,function(i,n) {if(value==n){$(that).val("");if(value=="請(qǐng)輸入密碼"||value=="確認(rèn)密碼"){$(that).attr("type","password");}}});})$(":input").focusout(function(event) {/* Act on the event */if($(this).val() == "") { if ($(this).hasClass('pwd')) {$(this).attr('type','text')};$(this).val($(this).attr("data"));}});})
這樣便看起來舒服多了。

轉(zhuǎn)載于:https://www.cnblogs.com/xjcjcsy/p/4196363.html

總結(jié)

以上是生活随笔為你收集整理的jQuery操作input改变value属性值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。