点击表格内的文字点击

Question

我得到了一段代码，在点击时创建一个highlightable 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，您可以创建一个方法，e.g：

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

然后调用它在你的td元素，e.g：

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