在运用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. 反欺诈(Fraud Detection)中所用到的机器学习模型

    反欺诈应用的机器模型算法,多为二分类算法. 1.gbdt梯度提升决策树(Gradient Boosting Decision Tree,GBDT)算法,该算法的性能高,且在各类数据挖掘中应用广泛,表现 ...

  2. b,u,i,s,这些被删除的标签以及用来替换他们的标签

    加粗文字 给文字加下划线 倾斜文字 给文字加删除线 这些是以前的HTML语言修饰文字用的,没有语义,所以被删除,不到万不得已 不能使用,HTML给了新的标签替换他们,并且有语义 定义重要性强调的文字 ...

  3. uoj#119. 【UR #8】决战圆锥曲线（线段树+复杂度分析）

    题解 传送门 题解 然而要我来说我感觉只是个爆搜啊-- //minamoto #include<bits/stdc++.h> #define R register #define ll l ...

  4. Linux根目录结构

    1:  bin目录 此目录存放所有二进制命令(用户) 2:  boot目录 Linux内核及引导系统程序所需的目录 3:  dev目录 所有设备文件的目录(如声卡.磁盘.光驱) 4:  etc目录 二 ...

  5. umask码和文件权限

    umask是chmod配套的,总共为4位(gid/uid,属主,组权,其它用户的权限),不过通常用到的是后3个,例如你用chmod 755 file(此时这文件的权限是属主读(4)+写(2)+执行(1 ...

  6. socket套接字基本概念

    int socket()函数创建的是套接字socket,返回的是socket描述符(套接字描述符),其实就是文件描述符,socket(套接字)其实就是文件 socket()创建了套接字(文件),只是开 ...

  7. [USACO07JAN]平衡的阵容Balanced Lineup BZOJ 1699

    题目背景 题目描述: 每天,农夫 John 的N(1 <= N <= 50,000)头牛总是按同一序列排队. 有一天, John 决定让一些牛们玩一场飞盘比赛. 他准备找一群在对列中为置连 ...

  8. 处理Json接收日期格式问题

    //处理Json接收日期格式问题function getNormalDate(dateNormal) { var receiveDate = new Date(parseInt(dateNormal. ...

  9. php小试牛刀

    [构造函数] function __construct() [析构函数] 当某个对象的所有引用被删除,或者对象被显式的销毁时会执行析构函数 function __destruct() [静态方法] p ...

  10. 解决spring使用动态代理

    解决spring使用动态代理类型转换失败的问题--java.lang.ClassCastException: com.sun.proxy.$Proxy$ cannot be cast to ... 转 ...