js实现表单(textarea)获取与焦点的用法
来源：自学PHP网
时间：2014-09-19 14:48 作者：
阅读:次
[导读] 获取与失去焦点在js中onfocus与onblur,而在jquery中都是使用focus与blur，两者稍稍有点区别，下面我一起看看。...
|
在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优化都有好处哦。 |
