jquery控制表單輸入框顯示默認(rèn)值的方法

更新時(shí)間：2015年05月22日 15:57:28 作者：不吃皮蛋

這篇文章主要介紹了jquery控制表單輸入框顯示默認(rèn)值的方法,可實(shí)現(xiàn)輸入框出現(xiàn)出現(xiàn)默認(rèn)值的效果,需要的朋友可以參考下

本文實(shí)例講述了jquery控制表單輸入框顯示默認(rèn)值的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('.someClass').each(function() {
  var $this = $(this);
  var defaultVal = $this.attr('title');
  $this.focus(function() {
   if ($this.val() === defaultVal) {
    $this.val('');
   }
  });
  $this.blur(function() {
   if ($this.val().length === 0) {
    $this.val(defaultVal);
   }
  });
 });
});
</script>
<style>
input {
 display:block;
 margin-bottom:5px;
}
</style>
</head>
<body>
<input class="someClass" type="text" title="Name" value="Name" />
<input class="someClass" type="text" title="Email Address"
value="Email Address" />
<input class="someClass" type="text" title="Default Value Here"
value="Insert form refill here" />
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

20款非常優(yōu)秀的 jQuery 工具提示插件推薦
工具提示（Tooltip）在網(wǎng)站中的一個(gè)小功能，但卻有很重要的作用，常用于顯示一些溫馨的提示信息。如果網(wǎng)站中的工具提示功能做得非常有創(chuàng)意的話能夠加深用戶對(duì)網(wǎng)站印象
2012-07-07
JQuery+Bootstrap 自定義全屏Loading插件的示例demo
這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-07-07
jquery插件實(shí)現(xiàn)圖片對(duì)比
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片對(duì)比，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
Jquery 獲取對(duì)象的幾種方式介紹
本文為大家介紹下Jquery如何獲取對(duì)象有哪幾種方式，感興趣的朋友可以參考下
2014-01-01
JQuery Tips(4) 一些關(guān)于提高JQuery性能的Tips
如今咱祖國(guó)已經(jīng)崛起了..電腦的配置也是直線上升.可是js的性能問(wèn)題依然不可小覷..尤其在萬(wàn)惡的IE中..js引擎速度本來(lái)就慢..如果JS如果再寫不好，客戶端多開幾個(gè)窗口假死肯定是家常便飯了.廢話不說(shuō)了，下面說(shuō)說(shuō)js性能提升的一些小Tips.
2009-12-12
Jquery中擴(kuò)展方法extend使用技巧
extend是常用的參數(shù)處理函數(shù)，特別是對(duì)默認(rèn)值的使用，但是在使用過(guò)程中，默認(rèn)值往往是不能被改變的,需要的朋友可以參考下
2014-08-08
Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
數(shù)據(jù)量很大的情況下使用Ajax去實(shí)現(xiàn)真的不合適，于是想采用Jquery來(lái)實(shí)現(xiàn)方法，具體的示例代碼如下，有需求的朋友可以參考下希望對(duì)大家有所幫助
2013-08-08
使用jQuery制作遮罩層彈出效果的極簡(jiǎn)實(shí)例分享
這篇文章主要介紹了使用jQuery制作遮罩層彈出效果的極簡(jiǎn)實(shí)例分享,效果中背景為半透冥且不可操作,在制作頁(yè)面上傳功能等場(chǎng)景下十分實(shí)用,需要的朋友可以參考下
2016-05-05
Jquery操作Ajax方法小結(jié)
這篇文章主要介紹了Jquery操作Ajax方法小結(jié)的相關(guān)資料,需要的朋友可以參考下
2015-11-11
jQuery向后臺(tái)傳入json格式數(shù)據(jù)的方法
這篇文章主要介紹了jQuery向后臺(tái)傳入json格式數(shù)據(jù)的方法,實(shí)例分析了傳遞json格式數(shù)據(jù)的原理與具體實(shí)現(xiàn)技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02