input 标签实现输入框带提示文字效果(两种方法)


Posted in Javascript onOctober 09, 2017

方法一: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 标签实现输入框带提示文字效果(两种方法)

点击的时候,提示文字消失;失去焦点的时候提示文字出现,但是有内容输入后失去焦点也不显示提示文字;还有,密码框和文本框不一样啊,密码框的值不显现的。

 方法三:直接写标签上;(这个比较实用)

代码如下:

<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 标签实现输入框带提示文字效果(两种方法),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不懂JavaScript应该怎样学
Apr 16 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 #Javascript
JS中Attr的用法详解
Oct 09 #Javascript
移动端效果之Swiper详解
Oct 09 #Javascript
浅谈node的事件机制
Oct 09 #Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 #Javascript
ES6中的Promise代码详解
Oct 09 #Javascript
js+html5生成自动排列对话框实例
Oct 09 #Javascript
You might like
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
js form action动态修改方法
2008/11/04 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python 画函数曲线示例
2019/12/04 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
keras之权重初始化方式
2020/05/21 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
小学推普周活动总结
2015/05/07 职场文书
酒店厨房管理制度
2015/08/06 职场文书
上班旷工检讨书
2015/08/15 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
MySQL多表查询机制
2022/03/17 MySQL
Python简易开发之制作计算器
2022/04/28 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL