正文 

当前位置： 首页 > 知识 >

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

     2023-03-05     33

关键词：

【中文标题】使用 JavaScript 更改焦点占位符文本的颜色 [关闭]【英文标题】：Changing color of placeholder text on focus with JavaScript [closed] 【发布时间】：2016-01-22 00:38:04 【问题描述】：

我正在尝试将占位符文本的颜色更改为白色焦点。您可以查看联系表格here.

我尝试了不同的 CSS 代码，但大多数代码在不同的浏览器上看起来并不相同 + 我已经进行了一些研究，现在我可以看到在设置占位符样式时存在一些限制CSS。

我的问题是，我可以使用 JavaScript 将占位符颜色更改为白色吗？我对编写 JavaScript 不是很熟悉，但希望得到任何帮助

【问题讨论】：

【参考方案1】：

相信您需要供应商前缀（来自 css-tricks.com）：

::-webkit-input-placeholder 
   color: red;


:-moz-placeholder  /* Firefox 18- */
   color: red;  


::-moz-placeholder   /* Firefox 19+ */
   color: red;  


:-ms-input-placeholder   
   color: red;

使用 javascript，您只能以编程方式在焦点事件上应用类似的样式（使用供应商前缀）。

编辑：事实上，我认为这些样式不能使用 javascript 应用。您需要创建一个类并使用 js 应用它。

CSS：

input.placeholderred::-webkit-input-placeholder 
   color: red;

jQuery:

var $textInput = $('#TextField1');
$textInput.on('focusin',
    function () 
         $(this).addClass('placeholderred');
    
);

$textInput.on('focusout',
    function () 
         $(this).removeClass('placeholderred');
    
);

JS：

var textInput = document.getElementById('TextField1');
textInput.addEventListener('focus',
    function () 
         this.classList.add('placeholderred');
    
);

textInput.addEventListener('blur',
    function () 
         this.classList.remove('placeholderred');
    
);

感谢最有帮助的 Armfoot，小提琴：http://jsfiddle.net/qbkkabra/2/

【讨论】：

嘿，当你复制粘贴他们的代码时至少引用CSS-Tricks :P OP 专门要求将其更改为焦点，请注意详细说明你如何使用该类以便这样做?他也在使用 jQuery，如果你更熟悉的话…… 抱歉，我并没有试图窃取它。我只是忘记了确切的前缀，所以复制了它。我将通过附加事件来更新答案。 添加了纯JS和jquery 这是你的code's fiddle :P @Armfoot 你很有帮助。谢谢！包含在答案中。【参考方案2】：

这仅适用于 css 和 html

CSS

input::-webkit-input-placeholder 
color: #999;

input:focus::-webkit-input-placeholder 
color: red;


/* Firefox < 19 */
input:-moz-placeholder 
color: #999;

input:focus:-moz-placeholder 
color: red;


/* Firefox > 19 */
input::-moz-placeholder 
color: #999;

input:focus::-moz-placeholder 
color: red;


/* Internet Explorer 10 */
input:-ms-input-placeholder 
color: #999;

input:focus:-ms-input-placeholder 
color: red;

和html

<input type='text' placeholder='Enter text' />

【讨论】：

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

...描述】：如何在输入框获得焦点时改变占位符的颜色？我使用这个css来设置默认颜色，但是如何在焦点上更改它？::placeholdercolor:blue;::-webkit-input-placeholdercolor:blue;/*Firefox<19*/:-mo 查看详情

使用 jQuery 更改占位符文本

】使用jQuery更改占位符文本【英文标题】：ChangePlaceholderTextusingjQuery【发布时间】：2012-03-0305:15:39【问题描述】：我正在使用jQuery占位符插件(https://github.com/danielstocks/jQuery-Placeholder)。我需要通过下拉菜单中的更改来更改占位符文... 查看详情

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

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

使用 Swift 更改占位符文本颜色

】使用Swift更改占位符文本颜色【英文标题】：ChangingPlaceholderTextColorwithSwift【发布时间】：2014-11-2210:31:23【问题描述】：我的设计实现了深蓝色UITextField，因为占位符文本默认为深灰色，我几乎看不出占位符文本的含义。当然，... 查看详情

Internet Explorer 10 和 11 在输入获得焦点时删除占位符文本

...einputisfocused【发布时间】：2015-07-1523:40:09【问题描述】：使用InternetExplorer10和11时，如果使用autofocus属性聚焦输入，则会删除输入占位符文本。例如：<inputtype="text 查看详情

如何使用 CSS 更改输入占位符文本

】如何使用CSS更改输入占位符文本【英文标题】：HowcanIchangeaninputplaceholdertextusingCSS【发布时间】：2020-05-1223:07:45【问题描述】：我正在使用wordpress，我正在尝试使用CSS更改输入占位符内容的内容。通过这样做，我能够在桌面版... 查看详情

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

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

IE 10, 11. 如何防止使用占位符的文本输入触发焦点输入事件？

】IE10,11.如何防止使用占位符的文本输入触发焦点输入事件？【英文标题】：IE10,11.Howtopreventthetriggeringofinputeventsonfocusfromtextinputwithplaceholder?【发布时间】：2018-06-1618:10:19【问题描述】：在IE11中，如果我有一封带有placeholder的空电... 查看详情

javascript明确输入占位符焦点(代码片段)

查看详情

使用用户属性更改 UITextField 的占位符文本颜色？

】使用用户属性更改UITextField的占位符文本颜色？【英文标题】：ChangeUITextField\'splaceholdertextcolorusingUserattributes?【发布时间】：2014-01-1607:43:02【问题描述】：我想从用户属性（界面构建器）更改占位符颜色，因为我不想子类化我... 查看详情

如何使用脚本更改 Unity UI 中的占位符文本？

】如何使用脚本更改UnityUI中的占位符文本？【英文标题】：HowtochangeplaceholdertextinUnityUIusingscript?【发布时间】：2015-04-1617:36:10【问题描述】：对于我的项目，默认值是根据外部输出计算的，可以使用新UnityUI中的输入字段更改这... 查看详情

使用 jquery 更改占位符文本字体和颜色

】使用jquery更改占位符文本字体和颜色【英文标题】：changingplaceholdertextfontandcolorwithjquery【发布时间】：2018-09-1913:55:36【问题描述】：我有一个如下形式的输入标签<inputtype="text"name="firstname"id="firstname"placeholder="Firstname">首先... 查看详情

在焦点 jquery 上将占位符输入类型文本更改为密码

...2-09-2705:05:23【问题描述】：好的，我有一个输入标签。我使用了jquery输入提示，因此它显示了title="password"。但如果它的类型是密码，它就不会显示标题，它只会看起来*。因此，我需要将输入输入为“文本”类型，然后将其更 查看详情

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

查看详情

html在焦点上隐藏占位符文本(代码片段)

查看详情

jQuery更改占位符文本颜色

...时间】：2013-02-0417:03:03【问题描述】：是否可以在jQuery中使用"::-webkit-input-placeholder"来设置占位符文本的颜色？类似这样的：$("input::-webkit-input-placeholder").css("color":"#b2cde0");【问题讨论】：看看这个 查看详情

使用 Javascript 更改字段的值时，Safari 会保持占位符可见

】使用Javascript更改字段的值时，Safari会保持占位符可见【英文标题】：WhenchangingthevalueofafieldwithJavascript,Safarikeepstheplaceholdervisible【发布时间】：2017-03-2809:14:11【问题描述】：在Safari中运行以下命令：https://jsfiddle.net/gkatsanos/2355m5d... 查看详情

初始化后更改输入字段的占位符文本

...lizing【发布时间】：2015-04-1713:33:03【问题描述】：我正在使用在地图上生成的输入字段。我想将输入字段的占位符文本从“搜索”更改为“搜索位置”。输入字段没有类或id，但其父项有。我尝试在下面使用jQuery初始化后进行更... 查看详情