在 TypeScript 中选择文本 [重复]答案

【问题标题】：Select text in TypeScript [duplicate]在 TypeScript 中选择文本 [重复]
【发布时间】：2017-11-15 21:27:36
【问题描述】：

如何在 TypeScript 的输入字段中选择文本。

在 Javascript 中，这个 wpuld 看起来像这样：

document.getElementById('id').select();

但 TypeScript 不支持选择（错误：[ts] 属性 'select' 在类型 'HTMLElement' 上不存在。）

补充几点：这可能是一个问题，因为我使用 dx 控件并且它们创建了一个包装器。您可以在此处查看 html：

<dx-text-box _ngcontent-c1="" id="test" ng-reflect-disabled="false" ng-reflect-value="0:00" class="dx-texteditor dx-widget dx-textbox">
<div class="dx-texteditor-container">
<input autocomplete="off" class="dx-texteditor-input" type="text" spellcheck="false" tabindex="0" role="textbox">
<div data-dx_placeholder="" class="dx-placeholder dx-state-invisible"></div><div class="dx-texteditor-buttons-container">
</div></div></dx-text-box>

【问题讨论】：

我找到了解决方案 (document.getElementById('id').getElementsByTagName('input')[0] as HTMLInputElement).select();

标签： html typescript select

【解决方案1】：

document.getElementById(string) 返回一个HTMLElement，它没有定义select() 方法。 HTMLInputElement 确实定义了一个 select() 方法并扩展了 HTMLElement，所以如果你转换为 HTMLInputElement，它应该可以工作：

 (document.getElementById('id') as HTMLInputElement).select();

【讨论】：

如果我只有 Input 元素，这应该可以工作。
谢谢！这也解决了我的问题

【解决方案2】：

您可以将document.getElementById() 的结果转换为更具体的类型，在本例中为HTMLInputElement：

(<HTMLInputElement>document.getElementById('id')).select();
// or (TSX-friendly)
(document.getElementById('id') as HTMLInputElement).select();

这是允许的，因为HTMLInputElement 扩展了HTMLElement，添加了诸如select 等并非所有类型的HTML 元素都存在的属性。

【讨论】：