ie6,7,8placeholder失效

最新推荐文章于 2023-08-23 23:32:40 发布

原创最新推荐文章于 2023-08-23 23:32:40 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何使用jQuery为不支持placeholder属性的浏览器提供回退方案。通过绑定事件监听器，当输入框为空且拥有placeholder属性时，自动填充placeholder文本，并在获得焦点时清除，失焦时恢复。特别处理了密码框，通过创建额外的文本框来模拟placeholder行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input绑定事件排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input id="pwdPlaceholder" class="textfield" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdField.hide();