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 相关文章推荐
Js切换功能的简单方法
Nov 23 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
js实现微信聊天效果
Aug 09 Javascript
详解使用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
通过php添加xml文档内容的方法
2015/01/23 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python 含参构造函数实例详解
2017/05/25 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python模块如何查看
2020/06/16 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Python中return函数返回值实例用法
2020/11/19 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
销售代表求职自荐信
2013/10/01 职场文书
学校采购员岗位职责
2014/01/02 职场文书
学生爱国演讲稿
2014/01/14 职场文书
大学生村官考核材料
2014/05/23 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers