文档章节

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

思维80
 思维80
发布于 2015/12/11 15:14
字数 410
阅读 112
收藏 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>


本文转载自:

共有 人打赏支持
思维80
粉丝 8
博文 111
码字总数 42366
作品 0
西安
程序员
私信 提问
jQuery+PHP打造网页搜索框功能

例如在百度上有个很使用的功能,就是用户在搜索的时候会自动提示相关搜索条件以供选择,非常人性化的设计,我们如何将此功能放到自己的项目中呢,经过一番研究,终于实现了此功能,分享给eve...

crossmix
2015/09/18
112
0
Element 2.0.0 正式版发布,带来大量新特性

Element 2.0.0 正式版已发布。Element 是饿了么开源的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。 新特性 综合 新增 主题 增强...

王练
2017/10/27
3.8K
10
placeholder在不同浏览器下的表现及兼容方法

1、什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失...

china008
2015/04/08
0
0
HTML标记之Form表单

一、表单的作用   从访问的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息,然后单击某个按钮提交这些信息。是客户端与服务器端...

hafiz.zhang
2016/02/22
0
0
AngularDart Material Design 输入

MaterialInputComponent Selector: material-input:not(material-input[multiline]) material-input是单行或多行文本字段,用户可以在其中输入。 它有可选的标签。注意:客户端必须在其指令列...

scooplol
09/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在10分钟内设置EOS钱包和帐户?

由于SuperNode超级节点社区建立在EOS之上,我们希望引导我们的社区成员设置EOS钱包和帐户,以便充分参与我们的生态系统。 虽然设置过程可能不如其他区块链系统那么简单,但不要担心。本指南旨...

笔阁
16分钟前
1
0
8.04-Win10非U盘重装系统

注意:最好准备一个你所需版本的秘钥(不能是数字0开头的) 【所需:Win10的ISO镜像、能够解压ISO格式的解压缩工具、最好准备你所需版本的秘钥(不能是数字0开头的)】 1、创建新的文件系统为...

静以修身2025
17分钟前
0
0
Docker的架构与自制镜像的发布

一. docker 是什么 大家都知道虚拟机吧,windows 上装个 linux 虚拟机是大部分程序员的常用方案。公司生产环境大多也是虚拟机,虚拟机将物理硬件资源虚拟化,按需分配和使用,虚拟机使用起来...

程序猿拿Q
33分钟前
8
0
ubuntu下pycharm调用Hanlp实践分享

前几天看了大快的举办的大数据论坛峰会的现场直播,惊喜的是hanlp2.0版本发布。Hanlp2.0版本将会支持任意多的语种,感觉还是挺好的!不过更多关于hanlp2.0的信息,可能还需要过一段时间才能看...

左手的倒影
42分钟前
2
0
Python监控服务器实现邮件微信报警[未测试]

本文中笔者暂时实现的只有cpu和内存的监控,python可以监控许多的主机信息,网络,硬盘,机器状态等,以下是代码的实现,代码可以实现windows和linux的监控。 实验环境:Ubuntu16.04和windo...

dragon_tech
47分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部