js控制placeholder属性

Posted 2023-04-16

如何用js控制html5 中placeholder属性的值，由于头部用框架形式，头部中的text的placeholder属性不同页面要显示不同文字，但是都是用同一个头部为框架，所以怎么实现不同页面placeholder属性显示文字不同。

参考技术A document.getElementById("ElementId").setAttribute("placeholder","你想修改的内容");本回答被提问者采纳 参考技术B 每个placeholder属性都能在那个标签里找到对应的值，哪个要改就改那个属性值不就好了么追问

问题是他在头部，头部是用框架的，所以每个页面的头部都一样，改了每个都一起改成同样的了。

ie中placeholder属性不支持，js解决

ie中placeholder属性不支持，js的解决方法：

//placeholder属性在ie下兼容
            function placeholder ( pEle , con ) {
                var pEle = pEle
                if( pEle.find("input,textarea").val() == "" ){
                    pEle.append("<i class=‘placeholder_ie‘>"+con+"</i>");
                }
                pEle.click(function () {
                    $(this).find(".placeholder_ie").css("display","none");
                    $(this).find("input,textarea").focus();
                })
                pEle.find("input,textarea").blur(function () {
                    if( pEle.find("input,textarea").val() == "" ){
                        pEle.find(".placeholder_ie").css("display","inline-block");
                    }
                })
            }
            // ie浏览器
            if( navigator.appName == "Microsoft Internet Explorer" ){
                placeholder( $(".header_box .serach_content").eq(0) , "search..." );
                placeholder( $(".news_product .search_website>p").eq(0) , "深圳" );
            }

css：

/*输入框ie下placeholder样式*/
.placeholder_ie{
    display: inline-block;
    width:100%;
    height:26px;
    position: absolute;
    left:-42px;
    top:0;
    line-height: 26px;
    font-size: 14px;
    padding:0 10px;
    color:#989898;
}