鼠标点击文本框内文字就消失 Input属性怎么写
我猜测你的意思是,光标进入input框内,input内的文字就消失。
方法一如下:
1)绑定onfocus方法,<input onfocus="clearContent(event)"/>
2)js中定义方法clearContent,
function clearContent(event) {
event.target.value=""
}
效果如下:
方法二,使用addeventListener绑定DOM2级事件
1)定义一个有初始值的元素<input value="123"/>
2)当js加载完成时,调用window.onload方法,来绑定input的focus监听事件:
window.onload = function(){
document.getElementsByTagName('input')[0].addEventListener('focus',clearContent)
}
3)定义clearContent方法:
function clearContent(event) {
event.target.value=""
console.log('啊哦,被清楚了')
}
效果如下:
参考资料:mdn技术文档-onfocus
使用onfocus事件检查当前值,如果是默认值,就将value属性置空。
<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入内容')this.value='';">
onfocus 事件在对象获得焦点时发生。
onfocus 通常用于 <input>, <select>, 和<a>.
提示: onfocus 事件的相反事件为 onblur 事件。
扩展资料
input的可选属性
1、属性:accept,值:mime_type,规定通过文件上传来提交的文件的类型。
2、属性:align,值:left right top middle bottom,不赞成使用。规定图像输入的对齐方式。
3、属性:alt,值:text,定义图像输入的替代文本。
4、属性:checked,值:checked,规定此 input 元素首次加载时应当被选中。
5、属性:disabled,值:disabled,当 input 元素加载时禁用此元素。
6、属性:maxlength,值:number,规定输入字段中的字符的最大长度。
7、属性:name,值:field_name,定义 input 元素的名称。
8、属性:readonly,值:readonly,规定输入字段为只读。
9、属性:size,值:number_of_char,定义输入字段的宽度。
10、属性:src,值:URL,定义以提交按钮形式显示的图像的 URL。
11、属性:type,值:button,规定 input 元素的类型。
12、属性:value,值:value,规定 input 元素的值。
onclick 事件会在对象被点击时发生。
请注意, onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。
focus(function()) 可用于触发函数
<html>
<head><title></title></head>
<body>
<input type="text" value="testValue" onfocus="if(value=='testValue') " onblur="if(value=='') ">
</body>
</html>
把上面的代码作成html文件,运行就有效果
<input type="text" value="点这里" onclick="this.value='';focus()">
</form>