IE10-浏览器实现placeholder效果

如下图,在文本框为空时显示提示文字

在IE10+和chrome浏览器加placeholder属性及可实现 ,单在IE10-浏览器并不支持该属性,

以下是placeholder在IE10-浏览器的实现

 1 <style type="text/css">
 2         /*输入框为空时提示文字的样式*/
 3         label.placeholder
 4         {
 5             color: gray;
 6             padding-left: 3px;
 7             cursor: text;
 8             z-index: 1000;
 9             position: absolute;
10             background: transparent;
11             font-size: 0.8em;
12             padding-top: 4px;
13         }
14     </style>
15     <script type="text/javascript">
16         /* 设置输入框为空时输入框内显示/隐藏提示文字
17         * @param show 是否显示提示文字,默认显示
18         */
19         $.fn.setHint = function (show) {
20             if ('placeholder' in document.createElement('input'))
21                 return;
22
23             var word = this.attr("placeholder");
24             if (word) {
25                 show = (show == undefined) ? (this.val() == "") : show; //根据内容是否为空确定是否显示
26                 if (show && this.val() == "") {
27                     this.prev("label.placeholder").show();
28                 } else if (!show) {
29                     this.prev("label.placeholder").hide();
30                 }
31             }
32         };
33
34         // 页面初始化执行的脚本
35         $(function () {
36             // IE10及以上浏览器支持placeholder属性,不需要用脚本实现
37             if (!('placeholder' in document.createElement('input'))) {
38                 $(":text[placeholder],:password[placeholder],textarea[placeholder]").wrap("<span></span>")
39                     .focus(function () {
40                         $(this).prev("label.placeholder").hide();
41                     }).blur(function () {
42                         if ($(this).val() == "") {
43                             $(this).prev("label.placeholder").show();
44                         }
45                     }).each(function () {
46                         var labelHtml = "<label class='placeholder'>" + $(this).attr("placeholder") + "</label>";
47                         $(labelHtml).insertBefore(this).click(function () {
48                             $(this).hide().next().focus();
49                         }).toggle($(this).val() == "");
50                     });
51             }
52         });
53     </script>

html:

<input type="text" placeholder="请输入用户名" />

转载于:https://www.cnblogs.com/zengyy/p/4780032.html

IE10-浏览器实现placeholder效果相关推荐

【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
jQ进阶篇--jQuery封装placeholder效果，让低版本浏览器支持该效果
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
android多行文本框hint居中,在安卓等移动浏览器中placeholder中的文字不垂直居中问题...
现在移动互联网的浪潮一波又一波,很多企业和个人都开始注重自己的移动互联网(当然很多是已经有了传统的PC端的东西),比如我们最近接的很多项目都是传统PC和移动端同步做的,这也说明了移动端在用户心目中的重 ...
jquery.placeholder.min.js让你的IE浏览器支持placeholder
2019独角兽企业重金招聘Python工程师标准>>> jquery.placeholder.min.js让你的IE浏览器支持placeholder http://www.ijque ...
DIV实现CSS 的placeholder效果
placeholder 是HTML5中input的属性,但该属性并不支持除input以外的元素但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> ...
个人角度谈IE10浏览器
个人角度谈IE10浏览器随着信息技术的迅猛发展,各种软件在不断的更新,在前不久,带来了一个特大的好消息,微软IE10发布了.我想这肯定给更多的用户带来新的体验感受.对于一个对IE10充满了向往的 ...
从 ie10浏览器下Symbol 未定义的问题探索vue项目如何兼容ie低版本浏览器（ie9, ie10, ie 11 ）
1. 问题: vue项目在ie11下一片空白并报Symbol 未定义的错原因: ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将EC ...
计算机运行新ie 命令,如何使用命令行卸载IE10浏览器？
某些用户在浏览Internet时可能很少使用IE10浏览器,因此希望将其卸载,但是通常,IE10浏览器是系统的功能之一,并且很难卸载,因此这次为您带来了一种方法使用命令行卸载IE10浏览器. 方法/步 ...
Win7版IE10浏览器正式版官方下载地址
Win7版IE10浏览器正式版官方下载地址 • 简体中文,Win7 SP1 32位版IE10下载: http://download.microsoft.com/download/4/1/4/4149B ...

IE10-浏览器实现placeholder效果

IE10-浏览器实现placeholder效果相关推荐

最新文章

热门文章