控制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实现控制内容的向上向下滚动效果
Jun 26 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
MutationObserver在页面水印实现起到的作用详解
Jul 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的库,结果发现很多东西
2006/12/31 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
django的csrf实现过程详解
2019/07/26 Python
python与js主要区别点总结
2020/09/13 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
详解Nginx 工作原理
2021/03/31 Servers
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis