jQuery实现IE输入框完成placeholder标签功能的方法


Posted in jQuery onSeptember 20, 2017

本文实例讲述了jQuery实现IE输入框完成placeholder标签功能的方法。分享给大家供大家参考,具体如下:

如果在输入框加上placeholder="xx"属性,例如:

<input type="text" placeholder="请输入关键词"/>

则可以在谷歌浏览器等高级浏览器的输入框中实现替换文本的功能,也就是得到如下图所示的对话框:

jQuery实现IE输入框完成placeholder标签功能的方法

但是这个属性在WIN7默认的浏览器IE8中无法兼容,更不要说IE6了。也就是说IE里面不支持placeholder这个标签。

不信的话,大可以把这段代码拉到IE8里面运行下试试,你只不过是得到一个空的对话框

在IE里面要实现这个要用组件失去焦点blur与得到焦点focus里面做,详细可以参考《JavaScript组件焦点与页内锚点间传值的方法》

其实可以完全不用jQuery,这里使用这是为了复习下《jQuery通过控制节点实现仅在前台通过get方法完成参数传递》

思想很简单,一开始这个文本框默认为#cccccc灰色字体,值为“请输入关键词”,当得到焦点之后,把它的颜色设置为#000000黑色,值为空,一旦其失去焦点,如果值为空,马上把其恢复默认的#cccccc灰色字体,值为“请输入关键词”

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索输入框替换文本</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
<form id="test">
  <input id="searchKeyword" type="text" maxlength="30" value="请输入关键词" style="color:#cccccc" />
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  var isthisnull = true ;
  $("#searchKeyword").focus(function(){
    if ($(this).val() == "请输入关键词" && isthisnull) {
      $(this).val("");
      $(this).attr("style","color:#000000");
      isthisnull = false;
    }
  });
  $("#searchKeyword").blur(function(){
    if ($(this).val() == "") {
      $(this).val("请输入关键词");
      $(this).attr("style","color:#cccccc");
      isthisnull = true;
    }
  });
});
</script>

这里注意的是,是加入一个isthisnull的布尔值来判断其是否为空,是为了判断用户是否要输入“请输入关键词”,

不能认为文本框里面有“请输入关键词”就是空,如果用户自己输入“请输入关键词”呢?

这里也不应该用jquery或者javascript来取color或者style的值是否为"#cccccc"或者“color:#cccccc”来判断,因为通过$(this).css("color")来取color,在不浏览器输出的结果是不一样的,而取style的话,ie会认为这是一个object,而不是字符串

设置一个isthisnull,也可以为后面进一步的表单验证做准备

最终在IE中得到如下效果:

jQuery实现IE输入框完成placeholder标签功能的方法

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
jquery 一键复制到剪切板的实例
Sep 20 #jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
You might like
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
详解如何设置Python环境变量?
2019/05/13 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
爱情寄语大全
2014/04/09 职场文书
寄语是什么意思
2014/04/10 职场文书
有关爱国演讲稿
2014/05/07 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
学雷锋标语
2014/06/25 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
文言文辞职信
2015/02/28 职场文书
golang中的空slice案例
2021/04/27 Golang
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS