Html5 placeholder在ie10以下伪提示

大家是知道的Html5在ie10以上的版本才支持,最近用bootstrap前端开发框架搞一个网站,想在ie10以下也能提示,所以就得用js伪装下了。

首先判断浏览器是否支持placeholder

if (!(‘placeholder‘ in document.createElement(‘input‘)))

然后追加text,本来想要直接更改val值的,获得鼠标清空,但是如果需要验证他是必填项的话就不对了。所以还是追加text。

$("input").not("input[type=‘password‘]").each(//把input绑定事件 排除password框  
                 function () {
                     if ($(this).val() == "" && $(this).attr("placeholder") != undefined) {
                         $(this).after(‘<input class="‘ + $(this).attr("class") + ‘" type="text" value=‘ + $(this).attr("placeholder") + ‘ autocomplete="off" />‘);
                         //$(this).val($(this).attr("placeholder"));
                         $(this).hide(); $(this).next().show();
                         $(this).next().focus(function () {
                             $(this).prev().show();
                             $(this).prev().focus();
                             $(this).hide();
                         });
                         $(this).blur(function () {
                             if ($(this).val() == "") { $(this).hide(); $(this).next().show(); }
                         });
                     }
也许还不太完美,希望大家指出。

时间: 2024-10-25 20:17:50

Html5 placeholder在ie10以下伪提示的相关文章

HTML5 Placeholder实现input背景文字提示效果

这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息. 语法基本是这个样子:<input placeholder=”提示信息...”> HTML代码 <form> <input

html5 placeholder ie10以下不兼容

/*html5 placeholder ie10以下不兼容 加上这个jquery代码可以解决兼容*/ $(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.remov

HTML5 placeholder

一.HTML5 placeholder相关的引言 placeholder在英汉词典中解释成了“占位符”.要理解并不难,请看此场景: “咦?”您可能会疑问,“这不是就是狗狗树下撒尿尿”.确实,该场景可以较好的诠释placeholder“占位符”之意.我们不妨将placeholder来个临时拆分:place + hold + er. 对于上面场景就有:place指树及附近区域:hold表示镇住了其他狗狗——此处为洒家的地盘:而er则将重点转到了尿上.于是,在这个例子中,placeholder指的就是

解决HTML5 Placeholder的方案

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xyly624.blog.51cto.com/842520/864959 使浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现知乎网的解决方法不错,特记录下. windows系统中以下浏览器测试通过:Google Chrome 18,Firefox 12,IE 9,IE 6,Oper

HTML5 placeholder实际应用经验分享及拓展

一.HTML5 placeholder介绍 placeholder在英汉词典中解释成了"占位符".我们不妨将placeholder来个临时拆分:place + hold + er.placeholder指的就是:"足以镇住这块区占据位置的字符.无论是传统软件或是web应用中,placeholder都是相当常见的. 如FireFox浏览器右上方的搜索占位符: 在可输入控件中,"占位符"一般作提示用,简洁明了,空间利用率高.然而,在XHTML的时代,控件元素并

IE8 不支持html5 placeholder的解决方案

IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans.Lee <[email protected]> http://www.ifrans.cn */ (function ($) { $.fn.extend({ "iePlaceholder":function (options) { options = $.extend({ pl

解决ie不支持HTML5 placeholder的问题

https://github.com/mathiasbynens/jquery-placeholder 解决ie不支持HTML5 placeholder的问题Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, see v1.8.7.Works in all A-grade browsers, including IE6.

HTML5:去除IE10中输入框和密码框的X按钮和小眼睛

在IE10和之后的IE版本中,当在输入框和密码框中输入的时候,后面会自动出现X按钮和小眼睛,如下图所示:  令人苦恼的是,这个效果只有IE才有,其它浏览器是没有这个功能的.为了统一,我们就需要去掉这个功能,做法也很简单,直接在CSS中添加如下语句即可: /* 去除IE输入框的X标记 */ input[type=text]::-ms-clear { display: none; } /* 去除IE输入框的小眼睛标记 */ input[type=password]::-ms-reveal { dis

DataList:HTML5中的input输入框自动提示宝器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新增的一个非常有用的元素. DataList的表现很像是一个Select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么. HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样,非常的简单! <label for="country_name"