JS Cursor positioning with keyup

Question

I have a function with onkeyup to modify the letters of text typed in uppercase.

When I tried to edit a letter in the middle of the input text the cursor will automatically position at the end of text.

I would like the cursor to keep the same position.

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeyup

Possible duplicate of [Stop cursor from jumping to end of input field in javascript replace](http://stackoverflow.com/questions/8219639/stop-cursor-from-jumping-to-end-of-input-field-in-javascript-replace) — Blue, Apr 28 '17 at 10:34

score 0 · Answer 1 · answered Apr 28 '17 at 11:04

0

Try This:

 <input type="text" id="fname" onkeypress="myFunction()">
 <script>
     function myFunction() {
       var x = document.getElementById("fname");
       x.value = x.value.toUpperCase();    
     }
 </script>

answered Apr 28 '17 at 11:04

Khushboo Mahajan

13
4

score 0 · Answer 2 · answered Apr 28 '17 at 11:07

I don't know why you need such thing.But just try this, it would help.

#fname{    
   text-transform: uppercase;
}

This is using simple CSS. If need uppercase value at the end you can try this after using that CSS.

<input type="text" id="fname" onfocusout="myFunction()">

<script>
function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}
</script>

score 0 · Answer 3 · answered Apr 28 '17 at 12:38

0

To uppercase first letter only:

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

To UpperCase all the letters

this.value.toUpperCase();

answered Apr 28 '17 at 12:38

User6667769

745
1
7
25

NoName · Accepted Answer · 2017-04-28T12:24:59.143

-1

$("#fname").on('input', function(){
     var start = this.selectionStart,
     end = this.selectionEnd;
     this.value = this.value.toUpperCase();
     this.setSelectionRange(start, end);
});

If you want to make only first latter to upperCase and all other to Lower case. You can make it like.

#fname {
    text-transform: lowercase;
}
#fname:first-letter {
   text-transform: uppercase;
}

But Please use only class for make some styles.

edited Apr 28 '17 at 12:24

answered Apr 28 '17 at 10:59

NoName

183
10

Thank you very much. It works well. Can I modify the first letter of text in uppercase and the rest in lower case? – Sarra Apr 28 '17 at 11:24
You are welcome. It would be greate if you give me a like and check my answer like correct. – NoName Apr 28 '17 at 12:26

JS Cursor positioning with keyup

4 Answers4