正文 

当前位置： 首页 > 源码 >

如何使用 Javascript 更新占位符颜色？

     2023-02-22     271

关键词：

【中文标题】如何使用 Javascript 更新占位符颜色？【英文标题】：How to update placeholder color using Javascript? 【发布时间】：2019-07-11 23:05:58 【问题描述】：

我正在网上搜索，但没有找到任何东西。 我正在尝试使用 javascript 更新文本框的占位符颜色，但我该怎么做呢？ 我有一个颜色选择器，颜色正在改变。

如果我的 CSS 中有类似的内容，我该如何更新它？

::placeholder 
  color: red;

<input placeholder="placeholder" />

是否有 javascript 命令来编辑它？ 像

document.getElementById('text').style.placeholderColor = newColor;

【问题讨论】：

【参考方案1】：

使用 CSS 变量。你也可以只定位需要的元素

function update() 
  document.querySelector('input[type=text]').style.setProperty("--c", "blue");

::placeholder 
  color: var(--c, red);

<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>

CSS 变量在修改您无法通过 JS 访问的伪元素时很有用，例如 :before/:after/::placeholer/::selection 等。您只需定义您可以轻松更新的自定义属性元素和伪元素将继承它。

相关：Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

【讨论】：

@MelMacaluso 对于 ie11 版本，我们可以使用我们切换的包含颜色的类（虽然不是很灵活） @DogukanCavus red 是默认值...单击按钮时蓝色将设置为仅第一个 @TemaniAfif 当然可以，我在暗示我们如何灵活地做到这一点啊啊啊 我见过的现代浏览器的最佳解决方案。谢谢【参考方案2】：

如其他答案所述，您不能change pseudo-element styles inline。但是，您可以在 &lt;style&gt; 本身中修改 CSS 规则，并且您不需要浏览器支持 CSS 变量。访问stylesheet 并获取现有的rule 或插入自己的style declarations，就像使用元素.style 一样：

const sheet = Object.assign(document.head.appendChild(document.createElement("style")), type: "text/css" );
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder ")].style;
placeholderStyle.color = "red";

Object.assign(document.body.appendChild(document.createElement("input")), 
  type: "button", value: "Color!", onclick() 
    placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
);
&lt;input placeholder="placeholder" /&gt;

【讨论】：

考虑动态选择器的更改有多容易？我想有比这更有效的方法：jsfiddle.net/xqu9g7r2/1 或者可能没有？ @TemaniAfif 您可能不想在每个update 呼叫like this 上创建新规则。但总的来说，是的，每个选择器都需要一个规则。 是的，更新正是我想要的。谢谢【参考方案3】：

还有另一种方法，但有点笨拙：使用 JS 将更多的 CSS 附加到正文的末尾。假设规则相同，浏览器会用最新的 CSS 覆盖当前的 CSS。

function changeColor(toColor) 
  addCSS = document.createElement('style');
  addCSS.innerHTML = "::placeholder  color: " + toColor + "; ";
  document.body.append(addCSS);

::placeholder  color: green; 
<input type="text" placeholder="placeholder">
<button onclick="changeColor('red')">red</button>
<button onclick="changeColor('blue')">blue</button>

【讨论】：

【参考方案4】：

如果占位符颜色语义依赖于某个状态，可以间接设置

::placeholder  color: green; 
.warn::placeholder  color: red; 
<input id="test" placeholder="hello">
<button onclick="test.classList.toggle('warn')">Warning!</button>

在许多情况下，这根本不需要 javascript：

::placeholder  color: green; 
.color::after  content: 'green'; 

:checked + .color + ::placeholder  color: red; 
:checked + .color::after  content: 'red'; 
<input type="checkbox" id="color01">
<label class="color" for="color01">Color: </label>
<input placeholder="hello">

【讨论】：

使用 JavaScript 更改焦点占位符文本的颜色 [关闭]

】使用JavaScript更改焦点占位符文本的颜色[关闭]【英文标题】：ChangingcolorofplaceholdertextonfocuswithJavaScript[closed]【发布时间】：2016-01-2200:38:04【问题描述】：我正在尝试将占位符文本的颜色更改为白色焦点。您可以查看联系表格here... 查看详情

使用 JS 获取正确的占位符颜色

...：我将输入的默认占位符颜色更改为蓝色。为什么我使用Javascript得到黑色占位符颜色？constgetPlaceholderColor=()=>letinputEl=document.querySelector(\'.myClass\');letinpu 查看详情

如何根据它是不是是占位符来更改 textarea 文本的颜色？

...布时间】：2012-08-2017:34:28【问题描述】：我基本上想使用JavaScript重新创建HTML5“占位符”属性，以便它与旧浏览 查看详情

javascript占位符颜色#css(代码片段)

查看详情

javascript占位符颜色#css(代码片段)

查看详情

如何更改特定输入字段的占位符颜色？

】如何更改特定输入字段的占位符颜色？【英文标题】：Howtochangeplaceholdercolorofspecificinputfield?【发布时间】：2016-02-2504:37:31【问题描述】：我想更改特定占位符的颜色。我为我的项目使用了许多输入字段，问题是在某些部分我需... 查看详情

如何更改焦点上的占位符颜色？

】如何更改焦点上的占位符颜色？【英文标题】：Howtochangeplaceholdercoloronfocus?【发布时间】：2012-10-2209:57:35【问题描述】：如何在输入框获得焦点时改变占位符的颜色？我使用这个css来设置默认颜色，但是如何在焦点上更改它？:... 查看详情

在 Edge 浏览器上，如何使用 CSS 更改输入占位符文本颜色？

】在Edge浏览器上，如何使用CSS更改输入占位符文本颜色？【英文标题】：OnEdgeBrowser,howtochangeinputplaceholdertextcolorusingCSS?【发布时间】：2015-11-1218:55:28【问题描述】：在Edge浏览器上，我无法更改输入占位符颜色。:-ms-input-placeholder... 查看详情

如何在角材料中使用 css 更改 md-input-container 占位符颜色？

】如何在角材料中使用css更改md-input-container占位符颜色？【英文标题】：HowdoIchangemd-input-containerplaceholdercolorusingcssinangularmaterial?【发布时间】：2017-05-0312:30:56【问题描述】：如何在AngularMaterial中使用css更改md-input-container占位符颜... 查看详情

如何将占位符颜色属性添加到 xamarin 表单中的自动完成字段？

】如何将占位符颜色属性添加到xamarin表单中的自动完成字段？【英文标题】：HowtoaddplaceholdercolorpropertytoAutocompletefieldinxamarinforms?【发布时间】：2018-07-3118:57:35【问题描述】：我想将占位符颜色属性添加到我的自动完成字段。我... 查看详情

如何访问 XLFormRowDescriptor 的占位符文本颜色

】如何访问XLFormRowDescriptor的占位符文本颜色【英文标题】：HowtoaccessplaceholdertextcolorofXLFormRowDescriptor【发布时间】：2017-03-0621:46:24【问题描述】：所以，我知道如何设置XLFormRowDescriptor项的占位符文本：[rowZIPCodeInput.cellConfigsetObject... 查看详情

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

】如何对占位符应用不同的颜色并输入文本框值？【英文标题】：HowtoapplydifferentcolorstoPlaceholderandinputtextboxvalue?【发布时间】：2014-03-2210:34:23【问题描述】：我正在为InternetExplorer9(IE9)使用http://jamesallardice.github.io/Placeholders.js/placeh... 查看详情

使用 Javascript 动态更改 HTML5 输入元素的“占位符”属性

】使用Javascript动态更改HTML5输入元素的“占位符”属性【英文标题】：Changingthe"placeholder"attributeofHTML5inputelementsdynamicallyusingJavascript【发布时间】：2011-04-2413:53:10【问题描述】：我正在尝试使用jQuery动态更新文本字段的HTML... 查看详情

如何在格式字符串中设置占位符的颜色

】如何在格式字符串中设置占位符的颜色【英文标题】：Howtosetthecolorfortheplaceholdersinaformatstring【发布时间】：2014-12-1715:40:50【问题描述】：我在VisualStudio中安装了Resharper，并且正在使用标准的“深色”主题，并且不知何故我设... 查看详情

在 reactjs 中设置文本输入占位符颜色

...这些CSS选择器：::-webkit-input-placeholdercolor:red;但我不知道如何在反应内联样式中应用这些类型的样式。【问题讨论】：【参考方案1】：只需给你的“input 查看详情

如何使用 CSS 设置占位符值？

...间】：2011-12-2522:25:36【问题描述】：我想只使用CSS而没有JavaScript或jQuery来设置输入框的占位符值。我该怎么做？【问题讨论】：【参考方案1】：你可以为webkit做这个：#text2::-webkit-input-placeholder::beforecolor:#666;conten 查看详情

text使用此输入占位符scssmixin更改占位符属性的颜色。添加背景颜色或只更改文本颜色(代码片段)

查看详情

如何更改 UITextField 的占位符颜色？

】如何更改UITextField的占位符颜色？【英文标题】：HowcanIchangetheplaceholdercolorofaUITextField?【发布时间】：2012-04-1210:44:56【问题描述】：我已经尝试了这个论坛中每个人都回答的两个选项，但对我没有任何作用...我试图覆盖：-(void)d... 查看详情