javascript - 输入中的最后一个字母需要为红色

Question

我在我的元素中有一个要求，它说如果用户在输入字段上输入一些东西，最后输入的字符应该是红色的 如下

我已经尝试了 nth-child 和所有的东西，但没有任何效果

感谢任何帮助

Answer 1

不幸的是，你不能用输入标签来做。我们没有办法设置单个字母的样式(first letter 除外)。

但是，谁说我们必须使用输入标签？例如，您可以显示一个 contenteditable span，并将所有更新提供给一个隐藏的 input 标签:

span.addEventListener('input', function (e) {
  input.value = this.textContent;
});

用一些 css 来设置它的样式，让它看起来像一个输入:

.awesome-span {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;

  border: 2px inset;
  background-color: white;
}

当然要使最后的字符高亮显示:

span.addEventListener('input', function (e) {
  input.value = this.textContent;

  // dirty hack to flatten the tree 
  this.textContent = this.textContent;

  var lastChar = document.createElement('span');
  lastChar.classList.add('highlighted-span');
  lastChar.appendChild(this.firstChild.splitText(this.textContent.length - 1));

  this.appendChild(lastChar);
});

并确保将光标放在末尾:

// add to end of event handler
var range = document.createRange();
range.selectNodeContents(this);
range.collapse(false);

var selection = window.getSelection();
selection.removeAllRanges();


selection.addRange(range);

var input = document.getElementsByName('filler-up')[0],
    span = input.previousElementSibling;

span.addEventListener('input', function (e) {
  input.value = this.textContent;
  
  // dirty hack to flatten the tree 
  this.textContent = this.textContent;
  
  var lastChar = document.createElement('span');
  lastChar.classList.add('highlighted-span');
  lastChar.appendChild(this.firstChild.splitText(this.textContent.length - 1));
  
  this.appendChild(lastChar);
  
  var range = document.createRange();
  range.selectNodeContents(this);
  range.collapse(false);
  
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
});

.awesome-span {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  
  border: 2px inset;
  background-color: white;
  width: 100px;
}

.highlighted-span {
  color: red;
}
input {
  opacity: 0.2;
}

<span class='awesome-span' contenteditable>blah</span>
<input name='filler-up' />

这是一个好的解决方案吗？没有。这是一个好主意吗？也许吧。

如果您使用 js 隐藏输入，可访问性不是问题。您可以将它嵌入到任何表单中，它会按照您的预期提交。这只是不好™。