input文本框设置和移除默认值

这里想实现的效果是：设置和移除文本框默认值，如下图鼠标放到文本框中的时候，灰字消失。

1.可以用简单的方式，就是给input文本框加上onfocus属性，如下代码：

[html] view plain copy

<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
οnfοcus='if(this.value=="请输入关键字进行搜索"){this.value="";}; '
οnblur='if(this.value==""){this.value="请输入关键字进行搜索";};'>

其实onfocus属性挺好用的，还可以在通过onfocus属性改变css样式，如下代码：

[java] view plain copy

<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
οnfοcus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'
οnblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'>

2.也可以使用jquery实现：

[javascript] view plain copy

$(document).ready(function() {
var vdefault = $('#keyword').val();
$('#keyword').focus(function() {
//获得焦点时，如果值为默认值，则设置为空
if ($(this).val() == vdefault) {
$(this).val("");
}
});
$('#keyword').blur(function() {
//失去焦点时，如果值为空，则设置为默认值
if ($(this).val()== "") {
$(this).val(vdefault); ;
}
});
});

转载于:https://www.cnblogs.com/originate918/p/6179713.html

input文本框设置和移除默认值相关推荐

html文本框设置默认值,HTML input文本框设置和移除默认值
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: οnfοcus='if(this. ...
input文本框设置不可编辑方法和HTML5 新的 Input 类型
input文本框设置不可编辑的3种方法: disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值.设置后文字 ...
文本框获取和失去焦点默认值问题
1. HTML控件<input id="txtName" type="text" value="默认值" /> <scri ...
input文本框设置移除默认内容(兼容IE低版本)
这里实现的目标是:设置和移除文本框的默认值,鼠标放上去,文字消失 HTML代码如下: JS实现方式如下: <input type="text" class="sea ...
css合并两个文本框,css实现input文本框的双边框美化
css实现input文本框的双边框美化 .input_div{width:250px; height:22px; border-style:solid; border-width:1px 0 1px ...
php如何禁掉文本框输入,如何禁止input文本框输入
如何禁止input文本框输入 nput文本框用于接收用户输入的信息,我们有两种方法可以禁止input文本框,一种方法是使用readonly,另一种方法是使用disabled,但二者之间还是有区别的,请 ...
php编辑框禁止输入,如何设置表单的input文本框不可编辑
设置表单input文本框不可编辑的方法:首先创建相应的代码文件:然后通过为表单字段设置为"οnfοcus=this.blur(),readonly.disabled"来实现不可编辑 ...
html input文本框样式,css设置input文本框样式代码实例_html/css_WEB-ITnose
css设置input文本框样式代码实例: 使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如 ...
java 文本域不可编辑_实现表单input文本框不可编辑的三种方法
问题有时,我们需要以不可编辑的模式显示表单域,那么如何实现?我们可以通过为表单字段(input文本框,标签,复选框,文本区域)设置以下方法来实现表单的不可编辑功能. 实现方式 1.οnfοcus=t ...

input文本框设置和移除默认值

input文本框设置和移除默认值

input文本框设置和移除默认值相关推荐

最新文章

热门文章