文档章节

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

思维80
 思维80
发布于 2015/12/11 15:14
字数 410
阅读 1.7K
收藏 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
西安
程序员
私信 提问
加载中

评论(0)

vue实现带提示框的单选/多选文本框组件封装

在这篇文章中: vue实现带提示框的单选/多选文本框组件封装 vue实现带提示框的单选/多选文本框组件封装 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojia...

CS逍遥剑仙
2018/12/15
0
0
教你一个vue小技巧,一般人我不说的

本文由云+社区发表 1. 需求 最近的项目中,需要实现在vue框架中动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选...

腾讯云加社区
2018/12/19
104
0
easyui textbox 密码框的prompt提示语显示*号问题的解决办法

在一些修改密码功能页上,需要在easyui textbox 上显示提示语,通常最简洁的方式是用prompt,但是因为textbox是密码框,所以prompt显示时变成*号,像输入的密码一样隐藏掉了。只有当输入框获...

osc_r33mp6vv
2019/12/13
1
0
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){$.fn.extend({"changeTips":function(value){value ...

牧涛
2015/04/23
0
0
jQuery+PHP打造网页搜索框功能

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

crossmix
2015/09/18
167
0

没有更多内容

加载失败,请刷新页面

加载更多

时间片轮询法

时间片轮询法 时间片轮询法是一种比较简单易用的系统架构之一,它对于系统中的任务调度算法是分时处理。核心思路是把 CPU 的时间分时给各个任务使用。我们常用的定时方法是定时器,把调度器放...

osc_j7rfhwi0
35分钟前
15
0
二项堆(三)之 Java的实现

概要 前面分别通过C和C++实现了二项堆,本章给出二项堆的Java版本。还是那句老话,三种实现的原理一样,择其一了解即可。 目录 1. 二项树的介绍 2. 二项堆的介绍 3. 二项堆的基本操作 4. 二项...

osc_ct8a6sdg
36分钟前
9
0
Windows 10 安装 Hadoop 2.10

  1. 配置JAVA_HOME环境和Hadoop环境:      2. 配置bin   3. 进入Hadoop中/etc/hadoop下     配置hdfs-site.xml增加:    <property> <!-- 单节点,所以配置成1 -->...

osc_jmtenr3d
36分钟前
28
0
如何让你在众多二手车中挑中满意的?python帮你实现(附源码)

前言 老司机带你去看车,网上的几千条的二手车数据,只需几十行代码,就可以统统获取,保存数据到我们本地电脑上 知识点: 1.python基础知识 2.函数 3.requests库 4.xpath适合零基础的同学 ...

osc_rmqoxylv
37分钟前
12
0
Selenium IDE使用指南三(控制流)

Selenium IDE附带的命令使您可以添加条件逻辑和循环到测试中。 这使您仅在满足应用程序中的某些条件时才执行命令(或一组命令),或根据预定义的标准重复执行命令。 JavaScript表达式 通过使...

分布式编程
38分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部