首页 > 代码库 > Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容

2024-07-12 12:12:24   220人阅读

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容.


Textarea 单击鼠标 清除默认字 点击文本域 默认内容消失 点击文本框 删除预置内容

在留言框、搜索栏或者Email订阅栏中有一段默认的文本，比如“请输入您的内容”，如果你在其中点击（窗体获取焦点），这段默认的文本就会自动消失。

第一步：添加代码方式：

<head>

….

<script type=”text/javascript”>

function clearDefault(el) {if (el.defaultValue=http://www.mamicode.com/=el.value) el.value = “” }

</script>

…

</head>

第二步：如果是输入栏（Input），在其中添加一个onfocus参数，如：

<input type=”text” id=”input_email_address” name=”email” value=http://www.mamicode.com/”你的邮箱地址” onfocus=”clearDefault(this)” />

第三步：如果是文本域，添加的onfocus参数如下：

<textarea name=”comment”  id=”input_comment” rows=”10″ onfocus=”this.value=http://www.mamicode.com/’ ‘; this.onfocus=null;” >请输入您的内容</textarea>

不在<head>标签内添加上述相关代码，只在文本域添加了onfocus=”this.value=http://www.mamicode.com/’ ‘; this.onfocus=null;”代码，貌似也正常的

 

 *******************************************************************************

***********************************************************************************

 

文本框默认文字内容消失显示效果

平时常忽略对文本框的重视,做为一个合格的美工,不能因局部影响到整体,必须注重每个细节的处理,才能使页面更完美.

 

若初始值是非空的：   
  <TEXTAREA   onmouseover="javascript:   if   (this.value=http://www.mamicode.com/=‘移到文本域上方即可输入‘){ this.value=‘‘;this.select();}"   wrap=VIRTUAL>移到文本域上方即可输入</TEXTAREA>   
  <input   type="text"   onMouseOver="javascript:   if   (this.value=http://www.mamicode.com/=‘移到文本域上方即可输入‘){ this.value=‘‘;this.select();}"   value="http://www.mamicode.com/移到文本域上方即可输入">   

 

若初始值是空的,输入文字后移开鼠标,当再次移入输入框,它将自动选中之前的文字：     
  <textarea   class="input"   onMouseOver="this.focus();this.select()"></textarea>   
  <INPUT   name="Input"   class=input   onmouseover=this.focus();this.select()   > 

 

移入输入框消失文字,离开输入框又显示文字

<INPUT TYPE="TEXT" size="18" value="http://www.mamicode.com/这是默认的内容" onfocus="if (value =http://www.mamicode.com/=‘这是默认的内容‘){value =‘‘}" onblur="if (value =http://www.mamicode.com/=‘‘){value=‘这是默认的内容‘}">


联系
我们