只要用过表单中的placeholder的前端同学，就会发现它的强大之处，再也不用写一些超多事件的JS来实现，而这个属性却不能被脑残的IE低版本所支持，我们只能想一些办法来变通一下。
一、JQ方式实现（不支持password类型）
| 代码如下 | 复制代码 |
| <script type="text/javascript"> if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholder]').each(function(){ var that = $(this), text= that.attr('placeholder'); if(that.val()===""){ that.val(text).addClass('placeholder'); } that.focus(function(){ if(that.val()===text){ that.val("").removeClass('placeholder'); } }) .blur(function(){ if(that.val()===""){ that.val(text).addClass('placeholder'); } }) .closest('form').submit(function(){ if(that.val() === text){ that.val(''); } }); }); } </script> |
|
上面的方法缺点就是不能支持password类型的文本框，目前还没有很好的解决办法。
二、使用JQ插件jquery.placeholer.js
Github地址：https://github.com/tonitech/jquery.placeholder.js 引入到页面然后执行下面的代码：
| 代码如下 | 复制代码 |
| <script type="text/javascript"> $(function() { $('input, textarea').placeholder(); }); </script> |
|
这个方法比较简单，唯一令我不喜欢的是它要求jquery版本1.3到1.8，而我现在在项目中使用的是1.11，所以无奈我没有使用，如果你的项目使用的是1.3-1.8版本的，可以尝试下。
三、原生JS通过Label标签实现
| 代码如下 | 复制代码 |
| <script type="text/javascript"> var funPlaceholder = function(element) { //检测是否需要模拟placeholder var placeholder = ''; if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) { //当前文本控件是否有id, 没有则创建 var idLabel = element.id ; if (!idLabel) { idLabel = "placeholder_" + new Date().getTime(); element.id = idLabel; } //创建label元素 var eleLabel = document.createElement("label"); eleLabel.htmlFor = idLabel; eleLabel.style.position = "absolute"; //根据文本框实际尺寸修改这里的margin值 eleLabel.style.margin = "8px 0 0 3px"; eleLabel.style.color = "graytext"; eleLabel.style.cursor = "text"; //插入创建的label元素节点 element.parentNode.insertBefore(eleLabel, element); //事件 element.onfocus = function() { eleLabel.innerHTML = ""; }; element.onblur = function() { if (this.value === "") { eleLabel.innerHTML = placeholder; } }; //样式初始化 if (element.value === "") { eleLabel.innerHTML = placeholder; } } }; funPlaceholder(document.getElementsByName("username")[0]); funPlaceholder(document.getElementsByName("password")[0]); </script> |
|
这个方法我现在在用，而且还是原生的，感觉很不错，推荐给大家。
时间： 2024-10-30 11:39:16