Question

我在这里得到了一段代码，可以在点击时创建一个突出显示的textarea。我喜欢它的工作方式。但是，我只想让textarea看起来很简单。我正在尝试使用一个表（1行/ 3列）而不是相同的功能。

有没有办法可以使用一个表格来突出显示其中的文字？关于如何实现这一目标的任何专家建议？

<textarea style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.focus();this.select()" readonly="readonly">Box 1</textarea>
<textarea style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.focus();this.select()" readonly="readonly">Box 2</textarea>
<textarea style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.focus();this.select()" readonly="readonly">Box 3</textarea>

Answer 1

您可以创建HTMLTableCellElement.prototype.select，如下所示：

if (!('select' in HTMLTableCellElement)) {
  HTMLTableCellElement.prototype.select = function() {
    var range = document.createRange();
    range.selectNodeContents(this);
    window.getSelection().addRange(range);
  }
}

<table>
  <tr>
    <td style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.select()">Box 1</td>
    <td style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.select()">Box 2</td>
    <td style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.select()">Box 3</td>
  </tr>
</table>

注意

如果您不想change the prototype of a class you don't own，可以创建一种方法，例如：

function selectElement(el) { var range = document.createRange(); range.selectNodeContents(el); window.getSelection().addRange(range); }

然后在td元素中调用它，例如：

<td onclick="selectElement(this)">Box 1</td>

在单击时突出显示表格内的文本

1 个答案: