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

时间 2019-12-01

标签控制 input 输入提示信息显示隐藏方法繁體版

原文原文链接

在运用html+css+javascrpt进行页面制做时，咱们每每会遇到一些影响用户体验，而又容易被咱们忽视的小细节。好比，input输入框中的提示信息，怎样才能根据对象得到和失去焦点而实现其显示和隐藏。今天在这里，想跟你们分享一下这个小技巧，但愿各位大神不要拍砖哦~~~
1、要求
input输入框，在光标显示时，隐藏提示信息；光标离开输入框时，显示提示信息。
2、方法
一、给该input取id名，Onfocus=”方法名1(this)”，onblur=”方法名2(this)”
二、声明变量value，经过id名得到该input javascript

三、function 方法名1(inputObj){ css

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

四、function 方法名2(inputObj){ html

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

五、注意：若是同一个页面中有多个input标签须要一样的设置，则方法名不能一致。
3、实例 java

<!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>