input里的部分字体高亮。

Question

input里的部分字体高亮,input输入框里的字能部分高亮吗？求大家赐教

Answer 1

引自免费微信小程序：皆我百晓生

要实现在input框内对部分内容进行高亮显示，我们通常面临一个限制：HTML的<input>元素不支持内部HTML样式应用，这意味着我们不能直接在<input>标签内使用<span>等标签来实现文本的高亮效果。

不过，可以采用一些变通的方法来模拟这一需求。下面是一个利用JavaScript和CSS来实现类似效果的方案：

方法一：使用contenteditable的div

我们可以将传统的<input>替换为一个具有contenteditable属性的<div>，这样就可以自由地在其中应用样式了。

HTML:

<div id="editable" contenteditable="true">
    Customer: Licho kwan (L5774) 
    <!-- 更多内容... -->
</div>

CSS:

#editable {
    border: 1px solid #ccc; /* 模拟输入框边框 */
    padding: 3px; /* 添加内边距 */
    min-height: 20px; /* 设置最小高度 */
}

/* 高亮类 */
.highlight {
    background-color: yellow;
}

JavaScript:

document.getElementById('editable').addEventListener('input', function() {
    var textToHighlight = "L5774"; // 你希望高亮显示的文本
    var regex = new RegExp(textToHighlight, 'gi');
    var innerHTML = this.innerHTML;

    // 使用正则表达式找到匹配项，并添加高亮类
    this.innerHTML = innerHTML.replace(regex, function(match) {
        return '<span class="highlight">' + match + '</span>';
    });
});

这个方法在用户每次输入时都会检查并高亮指定的文本。但请注意，这种方法可能会影响用户体验，因为它会持续修改innerHTML，在大量文本或频繁输入时可能会有性能问题。

方法二：使用自定义输入组件

如果你需要更复杂的交互或更好的性能，可以考虑构建一个自定义的输入组件，它在后台维护一个真正的<input>用于数据输入，而在前端展示一个结构化的、可高亮显示的文本表示。这要求更多的开发工作，包括监听输入事件、手动更新高亮显示的文本内容等。

以上两种方法都有其适用场景和局限性，具体选择应基于项目需求和预期的用户体验。希望这些建议对你有所帮助！