javascript - 使用 JavaScript 更改焦点上占位符文本的颜色

标签 javascript html css twitter-bootstrap-3 placeholder

<分区>

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

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

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

最佳答案

相信您需要 vendor 前缀(来自 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,您只会在焦点事件上以编程方式应用类似的样式(使用 vendor 前缀)。

编辑:事实上,我认为这些样式不能使用 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, fiddle :http://jsfiddle.net/qbkkabra/2/

关于javascript - 使用 JavaScript 更改焦点上占位符文本的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33286015/

相关文章:

javascript - 是否可以暂停 Chrome/Opera 中的 svg 错误

php - 使用 PHP 显示图像资源

javascript - HTML 标签在另一个标签内循环

css - 下划线 "_"在 CSS 中是什么意思?

javascript - 更新循环内对象内的变量

javascript - ExtJs 4 : Component with Ext. ux.upload 插件以 MVC 风格重写后停止工作

javascript - 打开一个子列表时滑动子列表

html - 行内 block 的不透明度

html - 具有剧烈布局变化的响应式网页设计

javascript - 动态添加的复选框未模型绑定(bind)到 IList