如何对占位符应用不同的颜色并输入文本框值？

Posted 2023-03-05

【中文标题】如何对占位符应用不同的颜色并输入文本框值？

【英文标题】：How to apply different colors to Placeholder and input textbox value?

【发布时间】：2014-03-22 10:34:23

【问题描述】：

我正在为 Internet Explorer 9 (IE9) 使用 http://jamesallardice.github.io/Placeholders.js/placeholders.jquery.js (v3.0.2 unminified, 18kb) 这个文件。

在这个文件中我改变了

placeholderStyleColor = "#ccc",
styleRules = document.createTextNode("." + placeholderClassName + "  color:" + placeholderStyleColor + "; "); 

到

placeholderStyleColor = "#B8B8B8",
styleRules = document.createTextNode("." + placeholderClassName + "  color:" + placeholderStyleColor + "!important" + "; ");

那么 In Texbox 字段的占位符颜色现在是 #B8B8B8。

但问题是：

B8B8B8 颜色同时应用于文本框占位符和值，因为我将 !important 添加到颜色样式。

我想做的是 B8B8B8 颜色需要应用于 placeholder only。

【问题讨论】：

为什么要添加重要！

您可能对css-tricks.com/snippets/css/style-placeholder-text感兴趣

@Rex ：因为我想更改占位符的颜色。我应该如何为输入值和占位符应用不同的颜色？

@eegloo 看小提琴jsfiddle.net/UY4K3/22

@Rex : 我试过这个css-tricks.com/snippets/css/style-placeholder-text 但它不支持 IE9

【参考方案1】：

Place holder Support though java script

var _debug = false;
var _placeholderSupport = function() 
    var t = document.createElement("input");
    t.type = "text";
    return (typeof t.placeholder !== "undefined");
();

window.onload = function() 
    var arrInputs = document.getElementsByTagName("input");
    var arrTextareas = document.getElementsByTagName("textarea");
    var combinedArray = [];
    for (var i = 0; i < arrInputs.length; i++)
        combinedArray.push(arrInputs[i]);
    for (var i = 0; i < arrTextareas.length; i++)
        combinedArray.push(arrTextareas[i]);
    for (var i = 0; i < combinedArray.length; i++) 
        var curInput = combinedArray[i];
        if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "textarea")
            HandlePlaceholder(curInput);
        else if (curInput.type == "password")
            ReplaceWithText(curInput);
    

    if (!_placeholderSupport) 
        for (var i = 0; i < document.forms.length; i++) 
            var oForm = document.forms[i];
            if (oForm.attachEvent) 
                oForm.attachEvent("onsubmit", function() 
                    PlaceholderFormSubmit(oForm);
                );
            
            else if (oForm.addEventListener)
                oForm.addEventListener("submit", function() 
                    PlaceholderFormSubmit(oForm);
                , false);
        
    
;

function PlaceholderFormSubmit(oForm)     
    for (var i = 0; i < oForm.elements.length; i++) 
        var curElement = oForm.elements[i];
        HandlePlaceholderItemSubmit(curElement);
    


function HandlePlaceholderItemSubmit(element) 
    if (element.name) 
        var curPlaceholder = element.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0 && element.value === curPlaceholder) 
            element.value = "";
            window.setTimeout(function() 
                element.value = curPlaceholder;
            , 100);
        
    


function ReplaceWithText(oPasswordTextbox) 
    if (_placeholderSupport)
        return;
    var oTextbox = document.createElement("input");
    oTextbox.type = "text";
    oTextbox.id = oPasswordTextbox.id;
    oTextbox.name = oPasswordTextbox.name;
    //oTextbox.style = oPasswordTextbox.style;
    oTextbox.className = oPasswordTextbox.className;
    for (var i = 0; i < oPasswordTextbox.attributes.length; i++) 
        var curName = oPasswordTextbox.attributes.item(i).nodeName;
        var curValue = oPasswordTextbox.attributes.item(i).nodeValue;
        if (curName !== "type" && curName !== "name") 
            oTextbox.setAttribute(curName, curValue);
        
    
    oTextbox.originalTextbox = oPasswordTextbox;
    oPasswordTextbox.parentNode.replaceChild(oTextbox, oPasswordTextbox);
    HandlePlaceholder(oTextbox);
    if (!_placeholderSupport) 
        oPasswordTextbox.onblur = function() 
            if (this.dummyTextbox && this.value.length === 0) 
                this.parentNode.replaceChild(this.dummyTextbox, this);
            
        ;
    


function HandlePlaceholder(oTextbox) 
    if (!_placeholderSupport) 
        //alert(oTextbox.tagName);
        var curPlaceholder = oTextbox.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0) 
            Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder);
            oTextbox.value = curPlaceholder;
            oTextbox.setAttribute("old_color", oTextbox.style.color);
            oTextbox.style.color = "#c0c0c0";
            oTextbox.onfocus = function() 
                var _this = this;
                if (this.originalTextbox) 
                    _this = this.originalTextbox;
                    _this.dummyTextbox = this;
                    this.parentNode.replaceChild(this.originalTextbox, this);
                    _this.focus();
                
                Debug("input box '" + _this.name + "' focus");
                _this.style.color = _this.getAttribute("old_color");
                if (_this.value === curPlaceholder)
                    _this.value = "";
            ;
            oTextbox.onblur = function() 
                var _this = this;
                Debug("input box '" + _this.name + "' blur");
                if (_this.value === "") 
                    _this.style.color = "#c0c0c0";
                    _this.value = curPlaceholder;
                
            ;
        
        else 
            Debug("input box '" + oTextbox.name + "' does not have placeholder attribute");
        
    
    else 
        Debug("browser has native support for placeholder");
    


function Debug(msg) 
    if (typeof _debug !== "undefined" && _debug) 
        var oConsole = document.getElementById("Console");
        if (!oConsole) 
            oConsole = document.createElement("div");
            oConsole.id = "Console";
            document.body.appendChild(oConsole);
        
        oConsole.innerhtml += msg + "<br />";
    

输入颜色的 CSS

.mypassword  background-color: lightgreen; 

input[type="text"]:focus 
    color: red;

DemoFiddle

【讨论】：

我在 head 标记中加载所有 javascript 文件，然后在 onclick 事件中显示输入表单，然后占位符不可见。如果我在点击事件中转到该页面，然后运行 ​​onload 函数，那么它正在工作。在这种情况下可以做什么？

把上面的java脚本包装成一个函数，在显示div的时候调用

如果我们在文本框中得到一些值，那么该值的颜色将变为占位符的颜色。这种情况下怎么办？