<!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. 使用python写一个最基本的mapreduce程序

    一个mapreduce程序大致分成三个部分,第一部分是mapper文件,第二个就是reducer文件,第三部分就是使用hadoop command 执行程序. 在这个过程中,困惑我最久的一个问题就是在 ...

  2. 裸机——I2C 2

    前面的随笔完成了I2C时序分析(不涉及仲裁) 现在可以学使用控制器的I2C了. 1.先回顾I2C的基础知识 (1)总线包括SCL + SDA. (2)通信的特点: 同步,串行,电平 所以决定了 I2C ...

  3. Clion 不能杀死进程

    描述 自己使用时发现点了结束按钮后,打开任务管理器,发现刚才运行的程序还在,并没有被杀死. 有时如果一个程序写了死循环,就会出现疯狂占用内存,最后不得不关机重启. 解决方案 这是他的社区有人也有这样的 ...

  4. INSERT⋯ACCEPTING_DUPLICATE_KEYS

    使用ACCEPTING DUPLICATE KEYS时,当插入时发现这条记录已存在时,那么这条记录将不会被insert,后续记录继续执行insert

  5. 笔记-python-语法-super

    笔记-python-语法-super 1.      super 1.1.    super起源 首先要理解类的继承和多继承,子类有时需要调用父类的方法, 非绑定方法: class C(B): def ...

  6. [bzoj1552][Cerc2007]robotic sort&&[bzoj3506][Cqoi2014]排序机械臂

    非常垃圾的一道平衡树,结果被日了一天.很难受嗷嗷嗷 首先不得不说网上的题解让我这个本来就不熟悉平衡树的彩笔很难受——并不好理解. 还好Sinogi大佬非常的神,一眼就切掉了,而且用更加美妙的解法. 题 ...

  7. sql查询作业答案

    sql查询作业答案   阅读目录 一 题目 二 答案 一 题目 1.查询所有的课程的名称以及对应的任课老师姓名 2.查询学生表中男女生各有多少人 3.查询物理成绩等于100的学生的姓名 4.查询平均成 ...

  8. 3670: [Noi2014]动物园

    题目链接 题意:给n个字符串,求出每个字符串的num值,加1后相乘.num[i]表示1~i中,有多少没有重叠的公共前缀后缀. 分析: kmp中p数组表示最大的公共前缀后缀.设一cnt数组,表示1~i中 ...

  9. wget 下载页面下所有文件

    先介绍几个参数:-c 断点续传(备注:使用断点续传要求服务器支持断点续传),-r 递归下载(目录下的所有文件,包括子目录),-np 递归下载不搜索上层目录,-k 把绝对链接转为相对链接,这样下载之后的 ...

  10. 什么情况使用 weak 关键字，相比 assign 有什么不同？

    什么情况使用 weak 关键字? 在 ARC 中,在有可能出现循环引用的时候,往往要通过让其中一端使用 weak 来解决,比如: delegate 代理属性 自身已经对它进行一次强引用,没有必要再强引 ...