用jquery實作輸入框取得焦點消失文字_jquery

我們在登入網站的時候，文字框中經常會有提示你輸入的訊息，當你點擊文字框，提示訊息自動消失，當文字框什麼都沒有，而且失去焦點的時候，又有了提示文字。

1.原型開發，先做一個簡單的：
我們首先需要一個html檔：

複製程式碼

複製程式碼

程式碼如下:

User Name:

PassWord:

下面加入jquery程式碼： 我使用了click 和blur內建事件類型處理，而且，只是對username框有效（因為密碼框還有別的因素考量）

複製程式碼

程式碼如下:

User Name:

PassWord:

2.做的更好
這樣基本的原型就寫成了，但是這個原型有許多的不足:
1.也許可以對密碼框也使用這種方式，但是密碼框的type類型是password,它不能顯示，何來提示文字？
2. if($(this).val()=="")這種寫法我可以接受，但是if($(this).val()=="Enter your name"),你不覺得這很...要是我就想輸這個呢... 3.提示文字用別的灰色的粗體表示，這樣交互性是不是更強？ 4.既然想要用兩種字體表示，能不能把他們提取出來？寫在.css裡？這是可以重用的啊!


解決方法
:
1.密碼框先讓它的type是text的，等到點擊了，我們再設定成password
2.用個變數來表示是否要切換。

3.設定不同的css. 4.用attr("class","class1"),attr("class","class2")來切換class,而不是引用id.(也就是說用.不用#) 下面是實作:

複製程式碼 程式碼如下:

<フォームメソッド="POST" id="ユーザー" アクション="">
ユーザー名:

PassWord:

3. 追加:
外部文書に css を書き込みます。
DRY原则!用插件来实现。
我在下一篇博客去实现。
作者: aiqier

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn