您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
控制input输入框中提示信息的显示和隐藏的方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了怎样控制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>- 上一个程序编程： Jquery中国地图热点效果
- 下一个程序编程： Jquery中的ajax再封装,简化操作介绍
