javascript - 让ie8实现placeholder属性效果,value值的默认颜色怎么设置才能和输入时的颜色不冲突?
大家讲道理
大家讲道理 2017-04-11 10:16:28
[JavaScript讨论组]

请问用上面这种方式,如果设置了value的默认颜色,怎么避免输入时的颜色不一样?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(2)
PHP中文网

有一款插件,基于jq 叫placholder,你可以试一试

ringa_lee
<input  type="text"   name="搜索"  value="搜索" placeholder="搜索" id="selector"/>

这个placeholder在ff、chrome等浏览器支持修改样式

::-moz-placeholder{color:red;}              //ff
::-webkit-input-placeholder{color:red;}     //chrome,safari
:-ms-input-placeholder{color:red;}          //ie10          

然后判断一下 如果浏览器不支持placeholder(我这个例子只判断了ie8),再进行js模拟placeholder的操作

$(function(){
    if(!!navigator.userAgent.match(/MSIE 8.0/)){
            $('input[placeholder], textarea[placeholder]').each(function() {
                var input = $(this);
                if (input.val() === '' && input.attr("placeholder") !== ''){   
                    input.addClass("placeholder").val(input.attr('placeholder'));
                }

                input.focus(function() {
                    if (input.val() === input.attr('placeholder')) {
                        input.val('');
                    }
                });

                input.blur(function() {
                    if (input.val() === '' || input.val() === input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
    }
});

注释:
:text选择所有类型为text的input元素。
如果需要自定义样式,并且希望placeholder在所有浏览器下表现一致,可以通过利用label标签模拟一个placeholder的样式放到输入框上,当输入框获得焦点的时候,隐藏label,当输入框失去焦点的时候,显示label
根据以上的代码 你就可以设置placeholder这个classstyle

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号