如何通过单击该单词（如果单击）将标签范围添加到文本区域中的特定单词中-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何通过单击该单词（如果单击）将标签范围添加到文本区域中的特定单词中

P粉561323975 2023-09-10 13:05:10

[HTML讨论组]

733

当我想为文本区域中的单词添加标签时，该标签不被接受。有什么方法可以通过单击我要添加标签的单词来为文本区域中的文本添加标签吗？例如span标签

<label>
  <textarea class="string-example" name="textarea3" id="textarea3" cols="122" rows="17">Lorem ipsum dolor sit amet...</textarea>
</label>

P粉561323975

全部回复(1)

P粉7878203962023-09-11 10:39:22 1楼

双击文本区域中的文本，该文本将突出显示。如果您只想设置样式，请使用 CSS： ::selection

textarea::selection {
  color: white;
  background-color: black;
}

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit ipsum. Eaque, facere architecto. Ipsum quas, modi impedit veritatis earum sunt quo reiciendis. Hic, sapiente earum fuga accusamus qui eos itaque provident! Eaque, ipsum in.</textarea>

要么使用

代替textarea，

或

使用 Textarea 作为 DIV 覆盖层 - 它将具有突出显示的标记



.markable {
  display: inline-block;
  position: relative;
}

.markable>* {
  all: unset;
  outline: 1px solid #999;
  vertical-align: top;
  font: 16px/1.4 monospace;
}

.markable div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: transparent;
}

.markable textarea {
  position: relative;
}
<div class="markable">
  <div>Lorem <mark>ipsum</mark> dolor sit amet...</div>
  <textarea>Lorem ipsum dolor sit amet...</textarea>
</div>



以上是概念证明，您仍然需要 JavaScript 才能将文本克隆到 .highliter DIV 中，插入  元素子元素围绕所需的文本选择 - 并确保（如果需要）底层 DIV 与文本区域同步滚动。



const search = "ipsum";

const regEsc = (str) => str.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');

const markable = (elMarkable) => {
  const elDiv = elMarkable.querySelector("div");
  const elTxt = elMarkable.querySelector("textarea");
  const updateScroll = () => {
    elDiv.scrollTop = elTxt.scrollTop;
  };
  const updateMark = () => {
    const val = elTxt.value;
    const markedVal = val.replace(new RegExp(`\\b${regEsc(search)}\\b`, "gi"), `<mark>$&</mark>`);
    elDiv.setHTML(markedVal);
  };
  elTxt.addEventListener("scroll", updateScroll);
  elTxt.addEventListener("input", updateScroll);
  elTxt.addEventListener("input", updateMark);
  
  // Init:
  updateScroll();
  updateMark();
};

document.querySelectorAll(".markable").forEach(markable);
.markable {
  display: inline-block;
  position: relative;
}

.markable>* {
  all: unset;
  outline: 1px solid #999;
  vertical-align: top;
  font: 16px/1.4 monospace;
}

.markable div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: transparent;
  overflow: auto;
}

.markable textarea {
  position: relative;
}
<p>Edit the text in textarea below. The string to be highlighted is "ipsum" (case insensitive)</p>
<div class="markable">
  <div></div>
  <textarea  name="textarea3" cols="40" rows="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit ipsum. Eaque, facere architecto. Ipsum quas, modi impedit veritatis earum sunt quo reiciendis. Hic, sapiente earum fuga accusamus qui eos itaque provident! Eaque, ipsum in.</textarea>
</div>



我将把单击选择留给读者。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>