在运用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>

控制input输入框中提示信息的显示和隐藏的方法的更多相关文章

  1. 如何控制android系统中NavigationBar 的显示与隐藏

    我们使用的大多数android手机上的Home键,返回键以及menu键都是实体触摸感应按键.如果你用Google的Nexus4或Nexus5话,你会发现它们并没有实体按键或触摸感应按键,取而代之的是在 ...

  2. unity3d中让物体显示和隐藏

    unity3d中让物体显示和隐藏的方法 gameObject.renderer.enabled //是控制一个物体是否在屏幕上渲染或显示  而物体实际还是存在的 仅仅是想当于隐身 而物体本身的碰撞体还 ...

  3. 实现bootstrap布局的input输入框中的图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

  4. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  5. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  6. jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...

  7. js与jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  8. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  9. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

随机推荐

  1. maredit测试

    int main() { } void addTotail(ListNode *& pHead, int value) { ListNode *node = new ListNode(); n ...

  2. MongoDB 分片1

    第一步: 准备数据节点 必须添加–shardsvr参数. mongod--port32770--shardsvr--dbpathD:\db\mongodata\shard\mongodb1--logp ...

  3. EF中的MySql返回 DataTable公共类库

    public static class SqlHelper { /// <summary> /// EF SQL 语句返回 dataTable /// </summary> / ...

  4. numpy中transpose和swapaxes函数讲解

    1 transpose() 这个函数如果括号内不带参数,就相当于转置,和.T效果一样,而今天主要来讲解其带参数. 我们看如下一个numpy的数组: arr=np.arange(16).reshape( ...

  5. cin、cout、cerr、clog------c++ Primer Plus

    cin对象与标准输入流相对应. cout对象与标准输出流相对应. cerr对象与标准错误流相对应,常用于程序错误信息,不缓冲,直接被发送给屏幕. clog对象也对应标准错误流(这点儿和cerr是一样的 ...

  6. 2019-RHCE-红帽题库(稳定)

    rhce7 考题2台服务器设置yum源[aa]name=aabaesurl=ftp://server.rhce.cc/dvdenabled=1gpgcheck=0 cd /etc/yum.repos. ...

  7. linux脚本遇到的一点问题

    系统环境: # uname -r -.el6.x86_64 # cat /etc/redhat-release CentOS release 6.5 (Final) 对服务器状态监控的一段脚本中使用了 ...

  8. DoS（拒绝服务攻击）与DDoS（分布式拒绝服务攻击）

    SYN Flood是当前最流行的DoS(拒绝服务攻击)与DDoS(分布式拒绝服务攻击)的方式之一,这是一种利用TCP协议缺陷,发送大量伪造的TCP连接请求,从而使得被攻击方资源耗尽(CPU满负荷或内存 ...

  9. Codeforces Round #503 (by SIS, Div. 2)B 1020B Badge （拓扑）

    题目大意:每个同学可以指定一个人,然后构成一个有向图.1-n次查询,从某个人开始并放入一个东西,然后循环,直到碰到一个人已经放过了,就输出. 思路:直接模拟就可以了,O(n^2) 但是O(n)也可以实 ...

  10. 【预警通告】Apache Struts2 远程代码执行漏洞

    Apache Structs2的Jakarta Multipart parser插件存在远程代码执行漏洞,漏洞编号为CVE-2017-5638.攻击者可以在使用该插件上传文件时,修改HTTP请求头中的 ...