Ie9以下的input输入框placeholder属性兼容方案

最新推荐文章于 2021-07-29 16:28:48 发布
最新推荐文章于 2021-07-29 16:28:48 发布
阅读量605 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 兼容 文章标签： IE9 placeholder兼容 ie 9 兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_28307565/article/details/73484819
本文介绍了一种在不支持placeholder属性的浏览器（如IE9及以下版本）中使用jQuery模拟placeholder效果的方法。通过判断浏览器是否支持placeholder，并利用jQuery为输入框绑定事件，实现了输入提示文本的显示与隐藏。

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8">
<style> 
.placeholder{ color:#999;}
</style> 
<script src="jquery-3.2.0.min.js"></script><!--需引入jQuery-->
<!--[if lte IE 9]>
<script>
//   兼容ie9的placeholder
function isPlaceholder(){
    var input = document.createElement('input');
    return 'placeholder' in input;
}
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).addClass("placeholder");
                            $(this).focus(function(){
                                if($(this).val()==$(this).attr("placeholder")){
$(this).val("");
$(this).removeClass("placeholder");
}
                            });
                            $(this).blur(function(){
                                if($(this).val()==""){
$(this).val($(this).attr("placeholder"));
$(this).addClass("placeholder");
}
                            });
                        }
                    });
            //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
            $("input[type='password']").each(
                    function() {
                        var pwdField    = $(this);
                        var pwdVal      = pwdField.attr('placeholder');
                        pwdField.after('<input  class="login-input" type="text" value='+pwdVal+' autocomplete="off" />');
                        var pwdPlaceholder = $(this).siblings('.login-input');
                        pwdPlaceholder.addClass("placeholder");
                        pwdPlaceholder.show();

pwdPlaceholder.addClass($(pwdField).attr('class'))
                        pwdField.hide();


                        pwdPlaceholder.focus(function(){
                            pwdPlaceholder.hide();
                            pwdField.show();
                            pwdField.focus();
                        });


                        pwdField.blur(function(){
                            if(pwdField.val() == '') {
                                pwdPlaceholder.show();
                                pwdField.hide();
                            }
                        });
                    })
        }
    });
}
//    end
</script>
<![endif]-->


</head> 
<body> 
<p>hello world</p>
    <input type="text" placeholder="请输入验证码"><br>
    <input type="password" placeholder="请输入密码">
</body> 


</html>
IE9版本的浏览器对placeholder的兼容,封装函数
m0_53328982的博客
08-12 137
** IE9版本的浏览器对placeholder的兼容,封装函数 ** // IE9版本的浏览器对placeholder的兼容,封装函数，需要的时候直接在页面调用 // placeholder(".ipt") .ipt是input框的class名 import $ from 'jquery' let placeholder=(target)=>{ $(target).val($(target).attr("datavalue")).addClass("inp"); $(target).f
解决IE浏览器input兼容placeholder问题
qq_286260460的博客
11-24 569
我们做兼容IE、谷歌浏览器页面时时常遇到一些效果不兼容的情况，本文针对IE浏览器下input 的placeholder属性不生效问题找到一个js方案，此案例采用Jquery方式实现，具体代码如下: //解决IE input兼容placeholder //使用方法 $("input").placeholder(); ;(function ($) { $.fn.placeholder = function (options) { var opts = $.extend({}, $.f
针对IE浏览器9导致input输入款placeholder不显示问题
05-27
针对IE浏览器9导致input输入款placeholder="请输入您想输入的内容"不显示问题
简单实现IE9及以下对placeholder的兼容性
热门推荐
樊小书生
08-20 1万+
placeholder属性的出现使input输入框不再单调，而且可以对用户做一个对输入内容的提醒或者指引，起到了很好的作用。但是 但是IE9及IE9以下不支持这个属性，这就让人很恼火呀，毕竟中国还有好多人用的是IE9及以下浏览器/(ㄒoㄒ)/~~。
placeholder浏览器兼容（ie9以上）解决方案
weixin_34174105的博客
09-28 207
2019独角兽企业重金招聘Python工程师标准>>> ...
关于html5标签PlaceHolder 兼容IE8，IE9浏览器
黄天霸的专栏
01-29 1137
(function($) { $.fn.PlaceHolder = function(className) { var _set = function($em, opt) { for (i in opt) { switch(i) { case 'value': $em.val(o
input的placeholder属性兼容ie8 优化版
07-18
总之，要实现 `input` 的 `placeholder` 属性在 IE8 和 IE9 的兼容，我们需要借助 JavaScript 来模拟其行为。通过创建一个显示提示文本的 `<span>` 元素，并监听用户的输入和点击事件，我们可以为这些老版本的 IE ...
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
10-26
首先，了解在IE中placeholder无法显示的原因是IE 9以下的版本不支持该属性。为此，需要采用JavaScript脚本来模拟这一功能。 第一种方法通过原生JavaScript结合jQuery实现：先通过document.createElement(&#39;input&#39;)...
兼容ie8/ie9的input placeholder属性优化实现
### Placeholder属性在IE8和IE9中的兼容性问题 IE8和IE9以及更早版本的IE浏览器并不支持HTML5的`placeholder`属性。如果在这些浏览器中使用了`placeholder`属性，那么它将不会正常工作，也就是说，占位符文本不会...
IE7 浏览器处理 兼容 input placeholder.zip
01-19
总结来说，本压缩包提供了一种在IE7浏览器中实现`input`元素`placeholder`属性兼容的解决方案。通过结合jQuery库和`jquery.placeholder.min.js`插件，开发者可以在不支持`placeholder`的旧版浏览器中为用户提供相似...
关于input 属性placeholder 在IE9下兼容
09-13 228
今天分享下同事关于input 属性placeholder 在IE9下不兼容的解决方案，小弟不是很懂，希望有看完的大佬说说你们的理解 <script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script> <script> (function($){ $.fn.pl...
input placeholder ie9
韩梦飞沙_韩亚飞
03-19 228
placeholder是文本框用来提示内容的属性，比如：&lt;input id="txt" type="text" name="account" placeholder="请输入帐号"&gt;1会显示为：  然而IE9不支持此属性，可以使用js来简单模拟placeholder行为。我的基本思路是为输入框设置value值，并设置字体颜色，根据输入框内容模拟placeholder。对于密码输入框pl...
Vue IE9不支持input的placeholder属性
暖一杯茶的博客
03-22 244
安装ie-placeholder npm install --save ie-placeholder main.js引入 import 'ie-placeholder'
关于input标签和placeholder在IE8，9下的兼容问题
weixin_30906671的博客
12-18 256
　　一、 　　input常用在表单的输入，包括text，password，H5后又新增了许多type属性值，如url, email, member等等，考虑到非现代浏览器的兼容性问题，这些新的type常用在移动端的项目中。 　　二、 　　IE10+浏览器下，input标签会有一个默认的样式，比如文本框的‘×’号，密码框的小眼睛。初衷是好的，有时候很方便，但有时候我们会自己设置样式和功能...
HTML：IE9及9以下浏览器兼容placeholder（包含密码输入框）
Siimple的博客
02-13 626
1.使用 HTML文件中： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="jquery.min.js"&gt;&lt;/script&gt; &lt;!--[if lte IE 9]&gt;
解决ie9以下的各种问题
weixin_34342207的博客
09-08 220
2019独角兽企业重金招聘Python工程师标准>>> ...
用placeholder遇到的坑
Stars_in_rain的博客
07-29 848
placeholder的文字位置调整不生效 最近写页面的时候使用到了input输入框的placeholder属性，在调整他的样式的时候遇到了问题。 placeholder的文字位置的调整不能使用margin，否则不会生效，要使用padding进行设置 input::placeholder { font-size: 14px; font-family: Arial; color: black ; padding-right: 5rem;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值