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

所属分类: 网络编程 / JavaScript 阅读数: 1494
收藏 0 赞 0 分享
在运用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>
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多