Clash Royale CLAN TAG#URR8PPP

Javascript - Remove cursor position in input field

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.

4 Answers
4

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:

paste

keydown

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


function insVal(el, txt, from, 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) isPaste

[...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

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
yesterday

Sorry for bugging you again. When you hit backspace, it removes two characters instead of one.
– Tim
15 hours ago

@Tim sorry when refactoring the code I forgot to add || isBackspace
– Roko C. Buljan
7 hours ago

|| isBackspace

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 />

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
yesterday

copy / paste

Element.addEventListener()

Thank you for the information, we can try blocking paste on the text box. Let me edit it. Will check on addEventListerner too
– Ashu
yesterday

Block? Why? I'd instead simply try to improve the necessary code to achieve the desired without destroying user experience.
– Roko C. Buljan
yesterday

Changed it to handle the paste scenario to paste also at last of the text.
– Ashu
yesterday

You just destroyed classic copy/paste functionality :
– Roko C. Buljan
yesterday

function changeCursorPosition()
var ele = document.getElementById('txt');
//set cursor position here
ele.setSelectionRange(1, 1);
;

<input type="text" id="txt" onkeypress="changeCursorPosition()" />

You can't do this in the normal input box. These controls are rendered at runtime and vary in implementation from browser to browser. But you can create a custom input box. You can wrap in a div and add input box and span side by side. Just show border-left of the span and mark it as an absolute position in css. Now, you can play with the position and also you have the handler on the input box. Do what you want to achieve.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.