html - 输入,更改文本后的文本区域样式?

标签 html css forms

我有一个文本区域/输入[type=text]。我想在有人点击文本区域时改变其背景颜色的样式。这发生在 input:focus

到目前为止还好,但我希望如果用户更改或输入某些文本,则保留此样式..如果用户不输入任何内容,其背景颜色将恢复为白色...如果输入一些文本背景颜色将保留红色...我在第二部分遇到麻烦... 我的示例 html

 <input placeholder='What should  I call you?' type='text'>

我正在尝试CSS..

     input:focus, input.active,
    select:focus,
    select.active,
    textarea:focus,
    textarea.active {
        background: red;
      }
input{
background:white;
}

最佳答案

++ 您必须考虑当用户键入文本或从输入中删除文本时,当用户键入某些内容时背景应该变为颜色,但当用户删除该文本时它应该返回白色,而不仅仅是在 焦点模糊。您应该使用jquery,因为css无法理解字段中是否有任何文本。

$('#myInput').focus(function(){
$(this).css('backgroundColor','red');
});

$('#myInput').blur(function(){
if($(this).val().length > 0) {
$(this).css('backgroundColor','red');
} else {
$(this).css('backgroundColor','white');
}
});

<强> JSFiddle

关于html - 输入,更改文本后的文本区域样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35533976/

相关文章:

html - 在 CSS 下拉列表 (megamenu) 中使用表单选择在 IE7 中失败——解决方法?

html - Safari flexbox 没有正确包含它的元素

jquery的toggleClass View 没有变化

javascript - 特定条件下的 Angular2 表单验证

javascript - 如何自定义 Bootstrap 工具提示弹出框的文本字体大小?

javascript - TypeError : $(. ..).SetHeight 不是函数

ruby-on-rails - 未定义的局部变量或方法 `f'在局部 View 中

javascript - AngularJS 与 ui.router : reload page when clicking the same state link

javascript - 从 ID 调用函数

html - 防止表单输入类型 ="number"中的负输入?