控制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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
JavaScript门面模式详解
Oct 19 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
了解javascript中变量及函数的提升
May 27 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
PHP 网页过期时间的控制代码
2009/06/29 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
详解python的变量缓存机制
2021/01/24 Python
测量实习生自我鉴定
2013/09/19 职场文书
法律专业应届本科毕业生求职信
2013/10/25 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
健康教育主题班会
2015/08/14 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis