placeholder是h5中新增的一个属性。比如input,textarea。但在低版本的浏览器中,不支持placeholder属性。还有可能存在样式的问题(placeholder时候的颜色和它所属的对象颜色一样)。这里就总结一下placeholder的兼容性问题的处理方法。
对于显示对象,对于同一个显示对象在不同地方的样子。对于是否支持,支持到什么程度。最直接的方式是我们是通过比较,通过眼睛来看出来的。需要在多环境(各种浏览器以及版本),多次数的测试下比较看出来的。然后总结出规律。
对于placeholder,有以下几点:
1,焦点进入。清除placeholder效果(就是placeholder提示语去掉)。
2,焦点出去。如果输入框中有其他文字则保持。如果输入框中没有文字,则出现placeholder提示语,并且颜色为placeholder该有的颜色。
以上两点输入框文本的颜色以及placeholder的颜色都各自有切换。
既然可以总结出规律,就可以自己用代码去实现它。步骤如下。
1,判断该浏览器是否支持placeholder特性。
2,对输入框写焦点进入,失去焦点以及输入内容改变的侦听函数。在函数中,写出placeholder的特点。
虽然用多余的代码写出placeholder的特性。但有一点没有完美实现。假如在输入框中输入了一定的文字,然后将这些文字全删掉。这个时候应该要表现出placeholder的特点。并保持焦点。因为用代码写placeholder的特性,其实就是改变输入框文本的颜色以及输入类容。不是真正的独立于输入框的单独文本。这个时候虽然描述了placeholder的特性。但不应该再保持焦点。如果保持焦点后,我再输入内容(这个时候在焦点内,不会触发进入焦点),会把placeholder的内容带进来。这个是次要的。通过判断输入框的改变以及做标记还有placeholder类容,也是可以知道placeholder此时的状态。关键的一点是placeholder的实现是用输入框自己来实现的。这样如果切换到了placeholder状态,你的光标就会对placeholder字符进行选择了。也许还有其他方法来实现,但这种方式是比较简单,也比较贴切的。代码如下。
//这里仅仅是对id名为input的input来实现的。可以用遍历对所有的input或textarea来实现
function placeholderSupport() { return 'placeholder' in document.createElement('input'); } if(!placeholderSupport()) { var text = $('#input').attr('placeholder'); var inputstr = ""; $('#input').focus(function(){ inputstr = $('#input').val(); if(inputstr == "" || inputstr == text) { $('#input').val(''); } $('#input').css('color', '#333333'); }); $('#input').blur(function(){ inputstr = $('#input').val(); if(inputstr == "" || inputstr == text) { $('#input').val(text); $('#input').css('color', '#cccccc'); } }); $('#input').keyup(function(){ inputstr = $('#input').val(); if(inputstr == "") { $('#input').blur(); } }); $('#input').blur(); }
另外,placeholder的样式可以自定义。虽然有默认的颜色。
//冒号前写对应的input或textarea元素等
#input::-webkit-input-placeholder{color:#cccccc;} /* 使用webkit内核的浏览器 */ #input:-moz-placeholder{color:#cccccc;} /* Firefox版本4-18 */ #input::-moz-placeholder{color:#cccccc;} /* Firefox版本19+ */ #input:-ms-input-placeholder{color:#cccccc;} /* IE浏览器 */