1

I'm using react mask textfield component . When I click on it , input cursor always shows up at the end of the mask . How to make when input is focused set that cursor after "+7(" ?

 <MaskedTextfield
    inputId="masktextfield"
    className="tf"
    reference={this.props.reference}
    maskedValue={this.props.maskedValue}
    numOfErrorMsgs={1}
    showMask
    guide
  />

enter image description here

enter image description here

Yerlan Yeszhanov
  • 2,149
  • 12
  • 37
  • 67

1 Answers1

0

You can use setSelectionRange(0,0);. First get the reference to the element, then apply that function. In plain JS the onFocus or onClick function would be like this:

var textfield = document.getElementById('masktextfield');
textfield.setSelectionRange(0,0);
Albondi
  • 1,141
  • 1
  • 8
  • 19
  • 1
    there is an error " property 'setselectionrange' does not exist on type 'htmlelement' " – Yerlan Yeszhanov Feb 21 '19 at 12:18
  • Maybe you need to cast the value to HTMLInputElement [link](https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement) – Albondi Feb 21 '19 at 12:21
  • thanks, I've fixed. But there is still a problem. If set setSelectionRange(4,4) it still shows cursor at the end, but with (4,5) as in the picture above(just added) it shows with selection. How to make it without selection? – Yerlan Yeszhanov Feb 21 '19 at 14:29
  • Thats what `setSelectionRange` does, if you set it to 4,5 then one character is selected. 4,4 should set the cursor at position 4(zero-based index) I don't know why it is failing. Testing it [here](https://codepen.io/anon/pen/pGmaEK?&editable=true) it works as intended. – Albondi Feb 21 '19 at 15:26