4

How would you remove the ability to change cursor position in an input field. So when a user types, they will always type at the end.

Tim
  • 155
  • 1
  • 11

3 Answers3

3

You might hit some old browser limitations with this one, but just to get you an idea.
You'll need to handle both paste and keydown events. For the paste you might need the Clipboard API to the rescue. Enough talking, here it goes:

function setRng(el, txt, from, to) {
  el.setSelectionRange(from + txt.length, to + txt.length);
}

function insVal(el, txt, from, to) {
  from = Math.max(0, from);
  to = to || from;
  el.value = el.value.substring(0, from) + txt + el.value.substring(to, el.value.length);
  setRng(el, txt, from, from);
}

function writeToEnd(ev) {
  var el = ev.target;
  var key = ev.keyCode;
  var isBackspace = key === 8;
  var isPaste = ev.type === "paste";
  var txt = isPaste ? (ev.clipboardData || window.clipboardData).getData('Text') : '';
  var fromOffset = isBackspace ? -1 : 0;
  
  if (txt && txt.length > 1 || isPaste || isBackspace) ev.preventDefault(); // Cause of some special input
  insVal(el, txt, el.value.length + fromOffset, el.value.length);
}

[...document.querySelectorAll('.writeToEnd')].forEach(el => {
  el.addEventListener('keydown', writeToEnd);
  el.addEventListener('paste', writeToEnd);
});
<input class="writeToEnd" type="text" value="input test"><br>
<textarea class="writeToEnd">textarea test</textarea><br>
(Test also COPY/PASTE using mouse and keyboard)

MDN Clipboard API,
Stack Overflow get-clipboard-data

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Thanks! It works great. I didn't think of the copy/paste. There is only a small bug. It doesn't work with backspace. Otherwise this has been the best answer thanks! – Tim Jul 29 '18 at 19:57
  • Sorry for bugging you again. When you hit backspace, it removes two characters instead of one. – Tim Jul 30 '18 at 17:27
  • @Tim sorry when refactoring the code I forgot to add `|| isBackspace` – Roko C. Buljan Jul 31 '18 at 01:14
1

This code will not stop user from changing the position of cursor but it won't allow user to write in between the text.

Please try this

function writeAtLast() {
            var textbox = document.getElementById('text');
            textbox.setSelectionRange(textbox.value.length, textbox.value.length);
        };
<input id="text" type="text" class="txtbox" onkeypress='writeAtLast()' onCopy="return false" onDrag="return false" onDrop="return false" onPaste="writeAtLast()" autocomplete=off />
Ashu
  • 2,066
  • 3
  • 19
  • 33
  • You forgot that one can use `copy / paste`? Also, please, teach people to use `Element.addEventListener()`. Also, querying the DOM on every single keystroke is such a bad idea. – Roko C. Buljan Jul 29 '18 at 12:09
  • 1
    Thank you for the information, we can try blocking paste on the text box. Let me edit it. Will check on addEventListerner too – Ashu Jul 29 '18 at 12:12
  • Block? Why? I'd instead simply try to improve the necessary code to achieve the desired without destroying user experience. – Roko C. Buljan Jul 29 '18 at 12:14
  • Changed it to handle the paste scenario to paste also at last of the text. – Ashu Jul 29 '18 at 12:19
  • You just destroyed classic copy/paste functionality :\ – Roko C. Buljan Jul 29 '18 at 12:21
  • @RokoC.Buljan can you please share some details what should have been done to handle this. Thanks – Ashu Jul 29 '18 at 12:25
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176967/discussion-between-ashu-and-roko-c-buljan). – Ashu Jul 29 '18 at 12:44
-1

function changeCursorPosition() {
  var ele = document.getElementById('txt');
  //set cursor position here
  ele.setSelectionRange(1, 1);
};
<input type="text" id="txt" onkeypress="changeCursorPosition()" />
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Akbar Taghipour
  • 334
  • 6
  • 23