<!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. Yii2 设计模式

    一. 单例模式 顾名思义, 单例模式就是只实例一次,通过一个接口去实现多处需要的同一类对象的需求. 例子: public function __construct($config = []) { Yi ...

  2. 生产-消费模式的synchronized和lock实现（十）

    lock: package com.net.thread.lock; import java.util.concurrent.locks.Condition; import java.util.con ...

  3. No module named 'PyQt5.sip'

    使用pyinstaller打包python文件为windows可执行程序可能遇到的问题 pyinstaller yourprogram.py打包的程序双击打开一闪而过,提示上面标题的错误 把pycom ...

  4. [Bzoj4818]序列计数（矩阵乘法+DP）

    Description 题目链接 Solution 容斥原理,答案为忽略质数限制的方案数减去不含质数的方案数 然后矩阵乘法优化一下DP即可 Code #include <cstdio> # ...

  5. maven打包成jar

    maven pom.xml中添加依赖 <build> <plugins> <plugin> <groupId>org.apache.maven.plug ...

  6. SuperHelper——灵活通用的、开源的.Net ORM微型框架

    SuperHelper是博主利用业余时间编写的一个ORM微型框架,除了可以提高开发效率,与其它ORM框架相比,博主更加喜欢SuperHelper的使用简单.适用范围广的特点. 简介 SuperHelp ...

  7. 发布“豪情”设计的新博客皮肤-darkgreentrip

    豪情 (http://www.cnblogs.com/jikey/)是一名在上海的前端开发人员,长期驻扎在园子里.他为大家设计了一款新的博客皮肤——darkgreentrip. 以下是该博客皮肤的介绍 ...

  8. Remote使用出现的问题及解决办法

    最近尝试跟着虫师的OP模式所写的bbs代码,应用自己的项目尝试修改,在第一步Remote启动Firefox上便出错,当前selenium2.53,firefox47.1,selenium server ...

  9. obj = object()，所创建的obj实例到底是个啥？

    In[1]: dir(obj) Out[1]:['__class__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__', '_ ...

  10. Asp.net获取网站绝对路径的几种方法

    在编写ASP.NET应用程序的时候,有时候为了更好的进行控制静态文件的路径,以及网站部署过程中的虚拟路径等问题,采用绝对路径避免资源出现Not Found,下面先看看几种获取绝对路径的方法: 1. 以 ...