In Below code, I want to change the input field to uppercase dynamically i.e. while entering the letters.
I know the style option i.e. text-transform but I want to do it using javascript.
I am practicing javascript concepts and as a part of learning, I want to do it.
<html>
<body>
<input type="text" size="40" id="name" name="name">
</body>
</html>
In Below code, I want to change the input field to uppercase dynamically i.e. while entering the letters.
I know the style option i.e. text-transform but I want to do it using javascript.
I am practicing javascript concepts and as a part of learning, I want to do it.
<html>
<body>
<input type="text" size="40" id="name" name="name">
</body>
</html>
- 7 "In Below code I want to..." Did you forgot to add the code? – Jankapunkt Commented May 5, 2017 at 13:36
- You are better off using the CSS and when they are done typing (onchange) do the transformation. – epascarello Commented May 5, 2017 at 13:37
7 Answers
Reset to default 3var upCase = getElementById('id').value.toUpperCase();
document.getElementById('id').value = upCase;
I believe you can just call the .toUpperCase() function on the innerHTML of the class or id you are trying to select. If you are using a class you can use .getElementsByClassName().
Edit:
I missed onKeyUp, this: onkeyup="this.value = this.value.toUpperCase();"
should work if you only want to use this in the one place.
You need to look the following post
Change Input to Upper Case
You can bine onkeyup event:
https://www.w3schools./jsref/event_onkeyup.asp
With toUpperCase method:
https://www.w3schools./jsref/jsref_touppercase.asp
How about this:
$("#input , #textarea").on('input', function(evt) {
var input = $(this);
var start = input[0].selectionStart;
$(this).val(function (_, val) {
return val.toUpperCase();
});
input[0].selectionStart = input[0].selectionEnd = start;
});
http://jsfiddle/22Jap/
Actually I got the answer but i dint found any answer like this thats why I have asked this question.
Thanks for your reply guys..
Below is the answer:
<!DOCTYPE html>
<html>
<body>
<input type="text" size="40" id="name" oninput="convertToUpperCase()">
<!-- Vishal Biradar-->
<script>
function convertToUpperCase(){
var name=document.getElementById("name").value;
if(name!=""){
name=name.toUpperCase();
}
document.getElementById("name").value=name;
}
</script>
</body>
</html>
I'm wondering why there is no answer here. There is a css that answers your question
text-transform: uppercase
You just need to add that style to your text input.
<input type="text" name="LastName" style="text-transform: uppercase;">
function converttoUpperCase(e)
{
var pPosition = e.target.selectionStart;
e.target.value=e.target.value.toUpperCase();
e.target.selectionStart=pPosition;
e.target.selectionEnd=pPosition;
}
function checkOnInput(e)
{
if(hasLowerCase(e.target.value))
converttoUpperCase(e);
}
function hasLowerCase(str)
{
return (/[a-z]/.test(str));
}<input oninput="checkOnInput(event);" type="text" size="40" id="name" name="name">