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


Posted in Javascript onFebruary 12, 2014

在运用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>
Javascript 相关文章推荐
JavaScript 事件的一些重要说明
Oct 25 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 #Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 #Javascript
JavaScript中创建对象和继承示例解读
Feb 12 #Javascript
javascript实现文本域写入字符时限定字数
Feb 12 #Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 #Javascript
动态加载jquery库的方法
Feb 12 #Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 #Javascript
You might like
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php网站地图生成类示例
2014/01/13 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
PHP Cookie学习笔记
2016/08/23 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
10个Python小技巧你值得拥有
2018/09/29 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python字典对象实现原理详解
2019/07/01 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
Python创建自己的加密货币的示例
2021/03/01 Python
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
花店创业计划书范文
2014/02/07 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
十七岁的单车观后感
2015/06/12 职场文书
企业法律事务工作总结
2015/08/11 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL