Question

我有一个由6位数字组成的确认码。当我单击输入字段之一时，该字段处于焦点位置，并带有蓝色下划线。

但是当我在下一个输入字段（第一个输入字段）中输入时，带下划线的蓝色消失了。

当我填充第二个输入字段时，我希望第一个输入字段保持下划线，而其他4个输入字段则保持下划线。

我使用了焦点选择器：

input[type='tel'].InputField:focus {border: 0 none; border-bottom: 2px solid blue; border-bottom-left-radius: 0; border-bottom-right-radius: 0; outline: none;}

Answer 1

您可以创建另一个包含相同样式的css类，我们将其称为“ afterEdit”（您可以根据需要命名）。

然后，您需要使用onChange属性来监听输入更改。对于每个输入，在捕获更改后，都需要应用“ afterEdit” css类，因此，尽管移至另一个输入，并且失去了对输入元素的关注，但仍然可以应用焦点样式。

您可以使用className进行操作，可以说是保存在状态中，布尔值表示输入是否已更改。因此，您可以修改输入元素的className：

render() {
 const isChanged = this.state.inputA.changed;
 let className = ['InputField'];
 if(isChanged) className.push('afterEdit');
 return <input className = {className.join(' ')} />

Answer 2

您发布的CSS代码段在focus中仅会以蓝色边框突出显示输入字段，这意味着如您在伪类:focus中所说的那样选择了输入字段

input[type='tel'].InputField:focus {
   border: 0 none;
   border-bottom: 2px solid blue;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; outline: none;
}

一个可能的解决方案可以是使用:placeholder-shown伪类的解决方法，如下所示：

input[type="tel"]:not(:placeholder-shown) {
  background-color: cyan;
  border: 1px solid blue;
}

<input type="tel" placeholder=" ">

<input type="tel" placeholder=" ">

我的答案是纯CSS的，基于ngryman的答案here。使用ReactJS语法相应地设置样式。

CSS / React JS：我希望输入值输入后保持焦点

2 个答案: