控制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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
使用Javascript简单计算器
Nov 17 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
JsRender实用入门教程
2014/10/31 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python创建临时文件夹的方法
2015/07/06 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python 数据结构之队列的实现
2017/01/22 Python
python常见排序算法基础教程
2017/04/13 Python
python3爬取数据至mysql的方法
2018/06/26 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
详解Python3 pandas.merge用法
2019/09/05 Python
python django中8000端口被占用的解决
2019/12/17 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
幼儿园植树节活动总结
2014/07/04 职场文书
行风评议整改报告
2014/11/06 职场文书
教师个人年度总结
2015/02/11 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS