控制input输入框中提示信息的显示和隐藏的方法

前端技术 2023/09/03 JavaScript
在运用html+css+javascrpt进行页面制作时，我们往往会遇到一些影响用户体验，而又容易被我们忽视的小细节。比如，input输入框中的提示信息，怎样才能根据对象获得和失去焦点而实现其显示和隐藏。今天在这里，想跟大家分享一下这个小技巧，希望各位大神不要拍砖哦~~~

一、要求

input输入框，在光标显示时，隐藏提示信息；光标离开输入框时，显示提示信息。

二、方法

1、给该input取id名，Onfocus=”方法名1(this)”，onblur=”方法名2(this)”

2、声明变量value，通过id名获得该input

3、function 方法名1(inputObj){
复制代码 代码如下:

if(inputObj.value==”……”){

inputObj.value=””;

}

}

4、function 方法名2(inputObj){
复制代码 代码如下:

if(inputObj.value==””){

inputObj.value=”……”;

}

}

5、注意：如果同一个页面中有多个input标签需要同样的设置，则方法名不能一致。

三、实例
复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>无标题文档</title>
<link href=\"file:///E|/做过的网站/midi/css/index.css\" type=\"text/css\" rel=\"stylesheet\" />
<script type=\"text/javascript\">
var value=document.getElementById(\'shuru\');
function qingkong(inputObj){
if(inputObj.value==\"请输入您的姓名\"){
inputObj.value=\"\";
}
}
function likai(inputObj){
if(inputObj.value==\'\'){
inputObj.value=\"请输入您的姓名\";
}
}

</script>
<style type=\"text/css\">
/*下面这段文字，可以在ie浏览器中改变输入框的背景颜色*/
.search input{star : expression(onmouseover=function(){
this.style.backgroundColor=\"#FF0000\"
},
onmouseout=function(){
this.style.backgroundColor=\"#FFFFFF\"
})
}
</style>
</head>
<body>
<input type=\"text\" id=\"shuru\" value=\"请输入歌曲名或歌手名\" onfocus=\"qingkong(this)\" onblur=\"likai(this)\"/>
</body>
</html>

本文地址：https://www.stayed.cn/item/8366

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案