控制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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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
SONY ICF-SW55的电路分析
2021/03/02 无线电
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python 实现微信防撤回功能
2019/04/29 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
离婚案件被告代理词
2015/05/23 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android