DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js實現表單(textarea)獲取與焦點的用法
js實現表單(textarea)獲取與焦點的用法
編輯:JavaScript綜合知識     

   在js中會用到onfocus與onblur、onmouseover之類的,jquery用事件綁定,同時下面是以textarea為例,如果是input就是值寫法不同。

  1.文本框顯示默認文字:

 代碼如下  

<textarea>前端開發-csswang</textarea>

  2.鼠標點擊文本框,默認文字消失:

 代碼如下  

<textarea onfocus="if(value==’前端開發-csswang’) {value=''}">前端開發-csswang</textarea>

  3.鼠標移至文本框,默認文字消失:

 代碼如下  


<textarea onmouseover="focus()" onfocus="if(value==’前端開發-csswang’) {value=''}">前端開發-csswang</textarea>

  4.鼠標點擊文本框,默認文字消失,點擊文本框外任意區域,默認文字又重現:

 代碼如下  


<textarea onfocus="if(value==’前端開發-csswang’) {value=''}" onblur="if(value=='') {value=’前端開發-csswang’}">前端開發-csswang</textarea>

  5.鼠標移至文本框,默認文字消失,鼠標移出文本框,默認文字又重現:

 代碼如下  

<textarea onmouseover="focus()" onfocus="if(value==’前端開發-csswang’) {value=''}" onmouseout="blur()" onblur="if (value=='') {value=’前端開發-csswang’}">前端開發-csswang</textarea>

  6.鼠標單擊文本框,文本框內任何文字消失(包括默認文字及後來輸入的文字):

 代碼如下  

<textarea onclick="value=''">前端開發-csswang</textarea>

  7.鼠標移至文本框,文本框內任何文字消失(包括默認文字及後來輸入的文字):

 代碼如下  

<textarea onmouseover="value=''">前端開發-csswang</textarea>

  8.單擊文本框後全選文本框內的文字:

 代碼如下  

<textarea onfocus="select()">前端開發-csswang</textarea>

  9.鼠標移至文本框全選文本框內的文字:

 代碼如下  

<textarea onmouseover="focus()" onfocus="select()">前端開發-csswang</textarea>

  10.回車後從當前文本框轉移到下一個文本框:

 代碼如下  

<textarea onkeydown="if(event.keyCode==13)event.keyCode=9">前端開發-csswang</textarea>

  11.回車後焦點從當前文本框轉移到指定位置:

 代碼如下  

textarea onkeypress="return focusNext(this,’指定位置的id名稱’,event)">前端開發-csswang</textarea>

  最後雖然我整理了這此地,但對於鼠標移至文本框,默認文字消失,鼠標移出文本框,默認文字又重現這個我強烈火推薦不要使用方法5,可用jquery方法

 代碼如下  

(function (){ $("#q").focus(function (){(this.value=='請輸入樓盤名稱')?this.value='':false}); $("#q").blur(function (){(this.value=='')?this.value='請輸入樓盤名稱':false}); }());

  上面不寫在了表單中而是直接使用jquery綁定表單input id然後進行操作,對於頁面簡潔與seo優化都有好處哦。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved