1,首先规定一下placeholder的规则
(1)文本框无内容失去焦点时,显示placeher的文字(一般是灰色字体);
(2)文本框聚焦时(还没有输入内容),placeher将消失,即文本框空白
(3)文本框输入内容时,placeholder也消失;
(4)文本框失去焦点时若有内容,则不显示placeholder
2,核心方法
/*** * convert Decimal str into hex(must be two bit,eg:02,f5)<br> * '153'-->99 * @param str */ to2Hex = function to2Hex(str) { var hex = parseInt(str).toString(16); if (hex.length === 1) { hex = '0' + hex; } return hex; }; cssColor2Hex = function (cssColor) { var stringObj = cssColor.replace(/RGB[\s]*\(([\w,\s]+)\)[\s]*/i, "$1"); //console.log(stringObj); var arr = stringObj.split(','); var r = com.whuang.hsj.trim(arr[0]); var g = com.whuang.hsj.trim(arr[1]); var b = com.whuang.hsj.trim(arr[2]); var rHex = to2Hex(r); var gHex = to2Hex(g); var bHex = to2Hex(b); return (rHex + gHex + bHex); }; /*** * * @param hexColor : #ccc * @param cssColor : [string]rgb(153, 153, 153) * @returns {boolean} */ compareColor = function compareColor(hexColor/*#789*/, cssColor/*rgb(153, 153, 153)*/) { if (typeof cssColor !== 'string') { return false; } if (hexColor === cssColor) {//IE8,jquery.css('color') will get '#ddd',but 'rgb(204, 204, 204)' return true; } if (com.whuang.hsj.startsWith(hexColor, '#')) { hexColor = hexColor.substr(1);//delete '#' in front } if (hexColor.length == 3) { hexColor = hexColor.substr(0, 1) + hexColor.substr(0, 1) + hexColor.substr(1, 1) + hexColor.substr(1, 1) + hexColor.substr(2, 1) + hexColor.substr(2, 1); } var cssResult = cssColor2Hex(cssColor); return (cssResult === hexColor); };
在线demo:
http://123.57.250.51/static/js/form4_placehold_value.html
兼容IE7和IE7以上,火狐,chrome
源代码见附件
相关推荐
兼容ie8、ie9的placeholder属性,其他浏览器用自身的placeholder。在ie8和ie9浏览器,点击span则让input聚焦。
具体看博客说明 https://blog.csdn.net/u011611479/article/details/112851238
placeHolder是html5加入的新属性,此代码基于jQuery实现placeholder属性功能。
原生手写的IEplaceholder.js插件,能够解决在IE9及以下浏览器上placeholder不能显示的bug,使用时只需要引入该IEplaceholder.js插件,然后获取所有的input节点,最后调用函数iePlaceholder(nodes,color)即可,nodes...
现在流行html5了都,所有的浏览器都支持placeholder,唯独IE不支持,那么这插件将完美解决IE浏览器不兼容input标签的placeholder属性.
但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,为了解决这个问题,因此,人为的去实现placeholder属性: 复制代码代码如下: //placeholder功能实现 var placeholder = { add: function (el) { if...
有好多的提示文字直接写在了input框中,placeholder属性只在高版本的谷歌和火狐中有但是不兼容ie8以下,此附件为input框中出现提示文字(兼容ie 火狐 谷歌)。
如何实现跨浏览器的placeholder效果呢? 附件是我写的一个jquery插件,可以实现兼容IE7,IE8及以上浏览器的placeholder效果
placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有...非现代浏览器( 例如 IE6-IE9 )是不支持placeholder属性的。现在用jQuery来使这些非现代浏览器也同样能能实现placehol
JS placeholder插件兼容IE6+浏览器 火狐 谷歌浏览器等
但是这个属性在WIN7默认的浏览器IE8中无法兼容,更不要说IE6了。也就是说IE里面不支持placeholder这个标签。 不信的话,大可以把这段代码拉到IE8里面运行下试试,你只不过是得到一个空的对话框 在IE里面要实现这个要...
以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: <input id=”t1″ type=”text” placeholder=”请输入文字” /> 介绍一个超强的让IE...
近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单、按钮组、按钮下拉菜单、导航、导航条、...IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用进行兼容IE8,如果
HTML5给我们带来了很多非常简单但却非常强大的HTML属性:placeholder, download, and autofocus,等等
在低版本的浏览器上使用表单的html5属性,跟随html5,兼容IE6+ 在提交表单时,利用html5的表单验证策略,如果浏览器支持html5则使用原生的表单验证,如果不支持,则模拟出一样的验证效果。 最简单的使用: $('form')...
高端浏览器支持此属性(ie10/11在获得焦点时文字消失),ie6/7/8/9则不支持。为了兼容各主流浏览器并使其呈现效果保持一致,以下三套方案仅供参考。 方案一: 摒弃原始属性placeholder,为input添加一个兄弟节点span...
浏览器支持 IE6 + Chrome合金 Safari 4+ Firefox 3.5+ 歌剧 错误/贡献 要贡献或发送想法,请github给我发消息或分叉该项目 建造 使用占位符,您应该已经安装了并运行npm install uglify-js -g npm install uglify...
谷歌、火狐及-webkit-内核的浏览器均支持该属性(css3),IE不支持该属性,所以在IE中,会自动降级,表格无固定列,可滑动的形式。 Edge浏览器在1703之后的版本使用了chromium内核,对css3的属性支持较好,也支持...