input 标签实现带提示文字的输入框
方法一:html5配合css3实现带提示文字的输入框(摆脱js);
webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录、搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅。
当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。
HTML5出现后,我们有一个更好的方法。
<input type="text" placeholder="用户名或邮件地址" name="username"/>
看到有placeholder标签,可以作为用户文字提示。这样子就非常方便了。但是为了最求完美,我们需要在选中后,将文字变浅,或者修改提示文件的样式,我们该怎么办?
input::-webkit-input-placeholder { color: #999; -webkit-transition: color.5s; } input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { color: #c2c2c2; -webkit-transition: color.5s; }
-webkit-input-placeholder,webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录、搜索等位置很适合。当然你要为了兼容IE6,这个方法是行不通。不过Ie9也支持placeholder标签,就是无法修改它的颜色而已。
那么,如果不支持该怎么办?可以简单直接使用Jquery帮忙,那么在就不在本文讨论范围了。
给一个Demo,Demo地址 必须在Webkit浏览器下才看到完整效果。是不是很方便?
方法二:就是 js 控制;
代码如下:
<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>
效果如图;
点击的时候,提示文字消失;失去焦点的时候提示文字出现,但是有内容输入后失去焦点也不显示提示文字;还有,密码框和文本框不一样啊,密码框的值不显现的。
方法三:直接写标签上;
代码如下:
<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style ="#999;"/> </div>
input 标签实现带提示文字的输入框的更多相关文章
- html5配合css3实现带提示文字的输入框(摆脱js)
来源:互联网 作者:佚名 时间:03-08 11:41:53 [大 中 小] webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框 ...
- 给input标签添加默认提示文字
<input name="username" placeholder="请输入用户名" /> placeholder = "提示文字&qu ...
- 关于编辑器对<input>标签报错提示“表单输入没有相关label”的问题
相信很多朋友在制作表单的时候,我们的编辑器会有下图的相关提示吧 我们发现虽然这样并不影响我们的正常使用,但是看着这样的报错提示总是很让人心烦,那么这到底是为什么呢? 其实,这是因为编辑器建议我们在使用 ...
- 如何解决button,a,input标签自带蓝色边框
通常我们会设置该标签outline:0;但是我在使用iview自带的button组件的时候,设置无效,经过测试只要设置 :focus{ outline:0; } 即可,方便有效
- h5中input的request属性提示文字字段
<input type="password" class="form-control" name="passWord" require ...
- input标签写CSS时需要注意的几点(先收藏)
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...
- <input>/<textarea>输入框设置默认提示文字(隐藏式)
html代码如下: <tr> <td>签 名:</td> <td><input type="text" nam ...
- input 标签鼠标放入输入框补全提示
JSP: <input type="text" placeholder="eventDesc" value="" id="e ...
- input提示文字;placeholder字体修改
在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...
随机推荐
- [HTML] CSS Id 和 Class选择器
id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标 ...
- Esfog_UnityShader教程_逐帧动画
有段日子没出这个系列的新文章了,今天就拿一个比较常见也比较基础的利用改变Shader来改变不断调整UV实现播放逐帧动画的小功能.很久没写了就当练练手了.在新版本的Unity中早就已经集成了Sprite ...
- path和classpath
对于Java的初学者,这两个环境变量,总是要遇到的.这里做一下总结. 1.path和classpath的含义 path是Windows操作系统的一个环境变量. 当操作系统需要运行一个程序,它需要知道该 ...
- 使用Freemarker宏进行可扩展式模块化编程
作者:Chu Lung 原文链接:http://blog.chulung.com/article/13 本文由MetaCLBlog于2016-07-08 14:42:10自动同步至cnblogs 一. ...
- 网站搭建 so easy
服务器(国际购买):http://www.gigsgigscloud.com/ 域名(阿里云): 解析到服务器 服务器需要安装 1.putty 2.CuteFTP(自己感觉这个靠谱点) / ...
- 使用jna调用dll,jdk位数和dll位数的关系
最近在学习jna,发现dll文件能能否成功调用取决于jdk位数. 32位jdk只能使用32位的dll,64位jdk只能使用64位的dll,否则位数不对应的话报的错是 "Exception i ...
- mysql 不允许连接
错误提示: ERROR 1130: Host '192.168.1.1' is not allowed to connect to this MySQL server的解决方法: 1.改表法.可能是你 ...
- Brn系列网上商城数据库说明文档
单店版BrnShop_1.9.351数据字典:点击下载 多店版BrnMall_1.9.496数据字典:点击下载 有对网上商城程序设计感兴趣的朋友,欢迎加入QQ群:235274151,大家可以交流下!
- static 变量
被static 修饰的变量全部称为静态变量.所有的静态变量全部存储在静态存储区.按静态变量定义的位置不同,又分为全局静态变量和局部静态变量. 1)全局静态变量 在全局变量的说明前加上static,就是 ...
- HTML标签CSS默认值研究
最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现htm ...