1

I'm playing with an idea for a keypad login. My question is how can I make the disabled input behave like a regular, enabled input? I want the text to scroll as you click the buttons if the text is larger than the input length.

function setOne(){ document.getElementById('someText').value += "A"; }
function setTwo(){ document.getElementById('someText').value += "B"; }
<input id="someText" type="text" disabled="disabled">

<div>
<button onclick="setOne();">A</button>
<button onclick="setTwo();">B</button>
</div>

No jQuery please. Thanks You!

Jonny
  • 1,319
  • 1
  • 14
  • 26

1 Answers1

1

Disabled inputs can not receive a focus, Please read here disabled can not trigger the text selection, Try readonly which will receive the focus you want to add. 

function setOne(){ document.getElementById('someText').value += "A";focus(); }
function setTwo(){ document.getElementById('someText').value += "B";focus(); }
function focus(){
var foo =document.getElementById('someText');
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);

}
#someText{
opacity:0.3;
background-color:gray;
}
<input id="someText" type="text" readonly>

<div>
<button onclick="setOne();">A</button>
<button onclick="setTwo();">B</button>
</div>
Just code
  • 13,553
  • 10
  • 51
  • 93
  • This doesn't seem to work in Edge or IE any thoughts on that? – Jonny Dec 03 '18 at 05:55
  • @Jonny check out this seems to be bug :https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15637833/ – Just code Dec 03 '18 at 05:58
  • what would be the drawback of using dir="rtl" with the input? This seems to work on ie and edge? Any problems with processing the data – Jonny Dec 03 '18 at 07:13
  • @Jonny I do not think so, you can try it with rtl too, just make sure you are appending data currently in rtl you need to prepend and set focus accordingly. – Just code Dec 03 '18 at 07:17
  • I didn't think it would have much of an effect i used document.write to check it and the input was the same. – Jonny Dec 03 '18 at 07:23