//判断浏览器是否支持 placeholder属性
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
}
//对不支持placeholder的浏览器处理
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" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
分享到:
相关推荐
尤其是在JavaScript功能实现上,不同的浏览器对某些特性支持程度不一,比如在IE浏览器中,早期版本不支持HTML5中的`placeholder`属性。`placeholder`属性是HTML5引入的一个非常实用的功能,它允许我们在输入框中设置...
在前端开发中,IE7浏览器的兼容性问题一直是一个挑战,特别是对于HTML5新特性,如`input`元素的`placeholder`属性。`placeholder`属性允许我们在输入框中设置提示文字,当用户聚焦输入框时,提示文字会自动消失。...
在这种情况下,可以借助JavaScript库或jQuery插件来实现兼容性处理。同时,`placeholder`仅提供静态提示,如果需要更复杂的交互,如动态提示或错误信息,可能需要使用其他方法。 总之,`placeholder`属性是HTML5中...
本篇文章将深入探讨如何利用jQuery在ASP.NET环境中实现表单验证,同时兼顾IE和Firefox等主流浏览器的兼容性。 首先,我们需要引入jQuery库。在HTML文档的`<head>`部分,通过`<script>`标签引入jQuery的核心库,如:...
为了实现跨浏览器兼容性,我们需要采用一些技巧来让 `placeholder` 在 IE 中也能正常工作。 在给定的代码中,使用了 jQuery 进行了兼容处理。首先,通过检测浏览器是否为 IE(通过 `$.browser.msie`),然后遍历...
本文详细介绍了如何使用jQuery来实现在不支持HTML5的input新属性placeholder的IE8及以下版本浏览器中,通过JavaScript脚本来为input元素提供提示内容的功能。这种做法尤其适用于密码输入框,因为HTML5的placeholder...
总结来说,这个jQuery插件通过监听输入框的焦点和失焦事件,以及在页面加载时对输入框进行初始化,成功地在IE浏览器上实现了与HTML5`placeholder`属性相似的功能。它为那些不支持`placeholder`属性的浏览器提供了一...
4. **兼容性考虑**:由于本解决方案依赖于CSS3的`transition`和`transform`属性,因此在不支持这些特性的浏览器(如旧版本的IE)中,可能无法实现预期的动画效果。可以使用CSS3检测库或条件注释来为这些浏览器提供回...
5. **良好的兼容性**:支持主流浏览器,包括Chrome、Firefox、Safari、Edge以及IE8+。 6. **易于扩展**:提供事件处理机制,方便开发者添加自定义功能。 **三、使用方法** 1. **引入资源**:首先在页面中引入...
5. **兼容性**:基于jQuery构建,Webluker与大多数现代浏览器兼容,包括Chrome、Firefox、Safari、Edge和IE9+。 6. **可扩展性**:该插件设计时考虑了扩展性,可以与其他jQuery插件或前端框架(如Bootstrap)无缝...
**jQuery验证插件Validator详解** ...结合`jQuery`的简洁API,可以快速实现高效、友好的表单验证机制,提高网站的用户体验和数据质量。通过学习和实践,你可以自如地运用这个插件解决实际项目中的验证问题。
5. **兼容性广泛**:支持所有现代浏览器,包括 IE10+。 6. **文档详尽**:官方提供了非常全面且易懂的文档,便于初学者快速上手。 #### 三、Bootstrap 的安装与配置 1. **下载并引入 Bootstrap**: - 从官网下载...
为了确保在旧版Internet Explorer中的兼容性,我们需要引入一些polyfill,如HTML5 Shiv,它允许老版本的IE识别HTML5的新标签。这部分代码通常放在`<head>`标签中: ```html <!--[if lt IE 9]> ...