Question

我有一个文本区/输入[type = text]。当有人点击进入文本区域时，我想将其背景颜色设置为更改。这会发生在输入：focus

直到这里它很好，但我希望这个样式保持，如果用户更改或键入一些文本..如果用户没有键入任何东西，其背景颜色将返回白色...如果键入一些文本背景颜色将保持红......我在第二部分遇到麻烦...... 我的样本html

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

我正在尝试...

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

Answer 1

您是否尝试过使用onChange事件？

W3Schools onChange

看到这个plunker - 你想要完成的是什么？

// Code goes here

function changed(element){
  element.style.background = 'red';
};

/* Styles go here */

input:focus, input.active,
    select:focus,
    select.active,
    textarea:focus,
    textarea.active {
        background: red;
      }
input{
background:white;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <input placeholder='What should  I call you?' type='text' onChange=changed(this)>
</body>

</html>

Answer 2

++ 您必须考虑用户输入的文字或从输入中删除的文字，当用户输入某些背景应该获得颜色但是当用户删除该文本时它应该返回白色，而不仅仅是{ {1}}或focus。您应该使用blur，因为jquery无法理解字段中是否有任何文字。

css

<强> JSFiddle

更改文本后输入，文本区域样式？

2 个答案: