Select text in TypeScript

Question

how can I select text in input field in TypeScript.

in Javascript this wpuld look like this:

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

but TypeScript does not support select (error: [ts] Property 'select' does not exist on type 'HTMLElement'.)

Added a few think: It may be a problem beacouse I use dx controls and they create a wraper. You can see here in 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>

I found a solution (document.getElementById('id').getElementsByTagName('input')[0] as HTMLInputElement).select(); — Jan, Nov 16 '17 at 11:10

score 10 · Accepted Answer · answered Nov 15 '17 at 12:49

10

document.getElementById(string) returns an HTMLElement which does not define a select() method. HTMLInputElement DOES define a select() method and also extends HTMLElement, so if you cast as HTMLInputElement, it should work:

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

answered Nov 15 '17 at 12:49

Brian Ball

12,268
3
40
51

1

This should work if I had just Input element. – Jan Nov 15 '17 at 13:28
1

Thank you! this solved my problem too – JEricaM Jun 12 '20 at 10:45

score 2 · Answer 2 · answered Nov 15 '17 at 12:48

You can cast the result of document.getElementById() to a more specific type, in this case HTMLInputElement:

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

This is allowed, since HTMLInputElement extends HTMLElement, adding the properties such as select that don't exist on all types of HTML element.

Select text in TypeScript

2 Answers2