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

发布时间：2023-10-09 14:59:17 所属栏目：教程来源：

导读：在运用html+css+javascrpt进行页面制作时，我们往往会遇到一些影响用户体验，而又容易被我们忽视的小细节。比如，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" "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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!