JQuery表單內(nèi)部文字提示是一種常用的網(wǎng)站設(shè)計(jì)元素，可以幫助用戶更好地填寫表單數(shù)據(jù)。下面我們來學(xué)習(xí)一下如何使用JQuery在表單內(nèi)部添加提示信息。

<!--在表單內(nèi)部定義默認(rèn)文字提示-->
<input type="text" name="username" value="用戶名" class="defaultText" />
<!--引入JQuery庫-->
<script type="text/javascript" src="jquery.js"></script>
<!--編寫JQuery腳本-->
<script type="text/javascript">
$(function(){
//選中所有class為defaultText的文本框
$('.defaultText').each(function(){
var defaultVal = $(this).val();
//獲取焦點(diǎn)
$(this).focus(function(){
//如果文本框的值等于默認(rèn)值，則清空
if($(this).val() == defaultVal){
$(this).val("");
}
});
//失去焦點(diǎn)
$(this).blur(function(){
//如果文本框的值為空，則賦值為默認(rèn)值
if($(this).val() == ""){
$(this).val(defaultVal);
}
});
});
});
</script>

上述代碼中，我們首先在表單中定義了一個(gè)class為defaultText的文本框，并設(shè)置默認(rèn)值為“用戶名”。接著我們引入JQuery庫，并編寫了一個(gè)腳本。在這個(gè)腳本中，我們使用了each()方法，選中所有class為defaultText的文本框，并分別設(shè)置了獲取焦點(diǎn)和失去焦點(diǎn)的事件。如果文本框的值等于默認(rèn)值，則在獲取焦點(diǎn)時(shí)清空它；如果文本框的值為空，則在失去焦點(diǎn)時(shí)賦值為默認(rèn)值。

通過這種方式，我們就可以輕松地在表單中添加文字提示，提高用戶體驗(yàn)。