在前端开发中，有时需要高亮显示 textarea 中的文本。这篇文章将介绍如何使用 JavaScript 和 CSS 来实现这一功能。
实现思路
要高亮显示 textarea 中的文本，我们可以将 textarea 覆盖于一个绝对定位的 div 上，并使其背景色透明。然后用 JavaScript 获取 textarea 中的文本，将其放入一个带有特定样式的 div 中，并将该 div 放置在与 textarea 完全重合的位置上。最后，我们可以利用 CSS 给该 div 加上任何所需的样式。
下面是具体的实现步骤：
- 使用 CSS 将 textarea 的
background-color属性设置为transparent，并将其覆盖于一个绝对定位的 div 上；
----------------- - --------- --------- - -------- - ----------------- ------------ --------- --------- ---- -- ----- -- -------- -- -
- 使用 JavaScript 获取 textarea 中的文本，并将其放入一个带有特定样式的 div 中；
----- -------- - ----------------------------------- ----- ---- - --------------- ----- --------------- - ----- --------------------- - ---- - --------- --------------------------------------------------------------------------- -----------------
- 使用 CSS 给该 div 加上任何所需的样式；
------------ - --------- --------- ---- -- ----- -- ----------------- ------- -------- --- -
示例代码
---- ------------------------- --------------------- ---- -------------------------- ------ ------- ----------------- - --------- --------- - -------- - ----------------- ------------ --------- --------- ---- -- ----- -- -------- -- - ------------ - --------- --------- ---- -- ----- -- ----------------- ------- -------- --- - -------- -------- ----- -------- - ----------------------------------- ----- ---- - --------------- ----- --------------- - ----- --------------------- - ---- - --------- --------------------------------------------------------------------------- ----------------- ---------
总结
在本文中，我们介绍了一种方法来高亮显示 textarea 中的所有文本。这种方法可以用于各种前端开发项目中，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27654