<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html input 输入框提示（hint）内容的实现</title>
</head>
<style type="text/css">
form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
label{display:block;height:40px;position:relative;margin:20px 0;}
span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
.border_radius{border-radius:5px;color:#B00000;}
h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
</style>
<body>
<form action="/testform.asp" method="get">
<input type="text" name="zip_code" pattern="[0-9]{6}" placeholder="请输入0-9的6位数编码"/>
<input type="submit" value="Submit"/>
</form>
<form class="border_radius" id="focus">
<h2>聚焦型提示语消失</h2>
<label><span>用户名或邮箱地址</span><input type="text" class="input_txt border_radius" /></label>
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
<form class="border_radius" id="keydown">
<h2>输入型提示语消失</h2>
<label><span>用户名或邮箱地址</span><input type="text" class="input_txt border_radius" /></label>
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#focus .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
});
})
$("#keydown .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
$(this).keyup(function(){
var val=$(this).val();
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
})
})
})
</script>
</html>

input 输入框提示信息的更多相关文章

  1. html的input输入框提示信息 点击隐藏

    <input type="text"    <!-- 文本框 --> name="textfield" value="请输入...& ...

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

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...

  3. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

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

  4. 认识input输入框的placeholder属性

    我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型 ...

  5. 解决手机浏览器上input 输入框导致页面放大的问题（记录）

    在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...

  6. Input输入框输入银行卡号自动空格

    input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~  如果是这样,会不会好很多呢~~ 其实逻 ...

  7. HTML中使用javascript解除禁止input输入框代码：

    转:表单中Readonly和Disabled的区别 参考资料: disabled和readonly区别: 参考博文1地址:http://blog.csdn.net/symgdwyh/article/d ...

  8. 为input输入框添加圆角并去除阴影

    <input type="text" name="bianhao" value="" placeholder="请输入商品编 ...

  9. 实现bootstrap布局的input输入框中的图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

随机推荐

  1. JZOJ 5919. 逛公园

    Description            琥珀色黄昏像糖在很美的远方,思念跟影子在傍晚一起被拉长……Description      小 B 带着 GF 去逛公园,公园一共有 n 个景点,标号为 ...

  2. hive 学习系列一（数据类型的定义）

    数字类型(Numeric Types) 整型 TINYINT(取值范围:-128 -- 127) SMALLINT(取值范围:-32,768 to 32,767) INT/INTEGER(取值范围: ...

  3. QToolBox学习笔记

    抽屉控件效果类似于QQ界面 最外面一层叫工具盒QToolBox QToolBox中装的是QGroupBox,分组的盒子 在分组的盒子QGroupBox中装的是QToolButton.

  4. POJ：2377-Bad Cowtractors

    传送门:http://poj.org/problem?id=2377 Bad Cowtractors Time Limit: 1000MS Memory Limit: 65536K Total Sub ...

  5. Git-Git克隆

    鸡蛋不装在一个篮子里 Git的版本库目录和工作区在一起,因此存在一损俱损的问题,即如果删除一个项目的工作区,同时也会把这个项目的版本库删除掉.一个项目仅在一个工作区中维护太危险了,如果有两个工作区就会 ...

  6. 【转帖】置高并发jdbc连接池

    简单的MySQL连接池 <Resource type="javax.sql.DataSource" name="jdbc/TestDB" factory= ...

  7. 为什么要搞vim

    一. 先得想清楚折腾vim受的这顿折磨值不值.值.零碎记录几点. 迫使我使用vim的原因如下: (1)之前实习的公司的开发机上只有vim,以后工作的公司也只有vim,同部门的同事大都用vim:如果不用 ...

  8. .net面试那些事

    2014-3-30这天从昆明来到了江苏无锡,一周时间,不同地方不同感触. 在经过长达35小时的火车,在上海南见到了我弟,在经过两小时汽车到了无锡.回想起来....在坐汽车途中,虽然自己已很累,但从上海 ...

  9. NGUI执行基本事件的原理

    通常我们为对象附加一个脚本组件,脚本组件只要加此鼠标处理事件方法,这个对象就有了点击事件了: void OnClick() { Debug.Log("onclick"); } 可为 ...

  10. eclipse importing maven projects 卡顿

    导入一个maven工程后 一直显示 importing maven projects 9% 解决办法: 找到eclipse安装目录下的eclipse.ini 在最后加入 -vm $JAVA_HOME% ...