Question

如何设置字符串的一部分，该字符串是文本输入的值，当它仍在输入字段中时？

我知道可以使用元素中具有contentedible属性的元素来执行此操作，但Google会使用其即时建议在类型文本的输入中执行此操作。第一个完成/建议出现在输入中。

Answer 1

虽然Google使用类似 THIS

的内容

很遗憾，您无法“打开+关闭” input元素，如：

<input> <span>Bold</span> normal </input>

我的建议是这样使用contenteditable LIVE DEMO 。

<div id="input" contenteditable="true"><span>This is </span> quite cool!</div>

CSS示例：

#input{
  font-family:Arial, Helvetica, sans-serif;
  border:1px solid #ccc;
  background:#eee;
  height:20px;
  width:200px;
  padding:7px;
  color:#888;
}
#input span{
  color:#444;
  font-weight:bold;
}

比在JS中检索元素“value”;）你可以使用：

alert( this.textContent );

的 EXAMPLE

Answer 2

在用户体验方面，我认为最好的用户体验不会完成用户输入的内容，而是在输入下方显示建议/已完成的选项。

文本输入中字符串的一部分的不同文本颜色

2 个答案: