控制input输⼊框中提⽰信息的显⽰和隐藏的⽅法
在运⽤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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
input框禁止输入<html xmlns="/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 ElementById('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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。