首页uniapp中输入框的文本高亮显示

uniapp中输入框的文本高亮显示

时间: 2025-01-09 22:50:45 浏览: 200

### 实现 UniApp 输入框内文本高亮显示为了实现在 UniApp 中输入框内的文本高亮显示效果，可以采用如下方案：通过监听 `input` 事件获取当前输入的内容，并利用正则表达式匹配关键字，在渲染时应用特定样式来达到高亮的效果。 #### 关键技术点 - 使用 Vue 的双向绑定特性 (`v-model`) 来同步输入框中的值。 - 利用计算属性 (computed property) 或者 watch 监听器处理输入变化并更新视图数据。 - 运用自定义指令或模板插槽机制动态调整 DOM 结构以支持 HTML 片段的安全插入[^1]。 #### 示例代码下面是一个简单的例子展示如何实现这一功能： ```html <template> <view class="container">  <input type="text" v-model="searchText" @input="onInput"/>  <rich-text :nodes="highlightedText"></rich-text> </view> </template> <script> export default { data() { return { searchText: '', originalText: '这是一个用于测试的句子' } }, computed: { highlightedText() { let reg = new RegExp(`(${this.searchText})`, 'ig'); return this.originalText.replace(reg, '<span style="color:red">$1</span>'); } }, methods: { onInput(event){ console.log('current value:', event.detail.value); } } } </script> <style scoped> /* 自定义样式 */ .container { padding: 20px; } input { width: 100%; margin-bottom: 10px; } </style> ``` 此示例展示了当用户在 `<input>` 元素中输入内容时，页面会自动检测到变动并通过正则替换的方式将匹配的部分包裹在一个带有红色样式的 `<span>` 标签里，从而实现了视觉上的高亮效果[^3]。

阅读全文