I am using the following style attribute to set the user input to uppercase so that when the user starts typing in the text box for example railway, then it should be altered to capital letters like RAILWAY without the user having to press the Caps-lock button.
This is the code I am using for the input:
<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>
But I am not getting the desired output by using this attribute.
You've put the style attribute on the <img> tag, instead of the <input>.
It is also not a good idea to have the spaces between the attribute name and the value...
<input type="text" class="normal"
name="Name" size="20" maxlength="20"
style="text-transform:uppercase" />
<img src="../images/tickmark.gif" border="0" />
Please note this transformation is purely visual, and does not change the text that is sent in POST.
NOTE: If you want to set the actual input value to uppercase and ensure that the text submitted by the form is in uppercase, you can use the following code:
<input oninput="this.value = this.value.toUpperCase()" />
I think the most robust solution that will insure that it is posted in uppercase is to use the oninput method inline like:
<input oninput="this.value = this.value.toUpperCase()" />
EDIT
Some people have been complaining that the cursor jumps to the end when editing the value, so this slightly expanded version should resolve that
<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />
The answers with the text-transformation:uppercase styling will not send uppercased data to the server on submit - what you might expect. You can do something like this instead:
For your input HTML use onkeydown:
<input name="yourInput" onkeydown="upperCaseF(this)"/>
In your JavaScript:
function upperCaseF(a){
setTimeout(function(){
a.value = a.value.toUpperCase();
}, 1);
}
With upperCaseF() function on every key press down, the value of the input is going to turn into its uppercase form.
I also added a 1ms delay so that the function code block triggers after the keydown event occured.
UPDATE
Per recommendation from Dinei, you can use oninput event instead of onkeydown and get rid of setTimeout.
For your input HTML use oninput:
<input name="yourInput" oninput="this.value = this.value.toUpperCase()"/>
The problem with the first answer is that the placeholder will be uppercase too. In case you want ONLY the input to be uppercase, use the following solution.
In order to select only non-empty input element, put required attribute on the element:
<input type="text" id="name-input" placeholder="Enter symbol" required="required" />
Now, in order to select it, use the :valid pseudo-element:
#name-input:valid { text-transform: uppercase; }
This way you will uppercase only entered characters.
try
<input type="text" class="normal"
style="text-transform:uppercase"
name="Name" size="20" maxlength="20">
<img src="../images/tickmark.gif" border="0"/>
Instead of image put style tag on input because you are writing on input not on image
Set following style to set all textbox to uppercase:
input { text-transform: uppercase; }
Using CSS text-transform: uppercase does not change the actual input but only changes its look.
If you send the input data to a server it is still going to lowercase or however you entered it. To actually transform the input value you need to add javascript code as below:
document.querySelector("input").addEventListener("input", function(event) {
event.target.value = event.target.value.toLocaleUpperCase()
})
<input>
Here I am using toLocaleUpperCase() to convert input value to uppercase.
It works fine until you need to edit what you had entered, e.g. if you had entered ABCXYZ and now you try to change it to ABCLMNXYZ, it will become ABCLXYZMN because after every input the cursor jumps to the end.
To overcome this jumping of the cursor, we have to make following changes in our function:
document.querySelector("input").addEventListener("input", function(event) {
var input = event.target;
var start = input.selectionStart;
var end = input.selectionEnd;
input.value = input.value.toLocaleUpperCase();
input.setSelectionRange(start, end);
})
<input>
Now everything works as expected, but if you have slow PC you may see text jumping from lowercase to uppercase as you type. If this annoys you, this is the time to use CSS, apply input: {text-transform: uppercase;} to CSS file and everything will be fine.
The issue with CSS Styling is that it's not changing the data, and if you don't want to have a JS function then try...
<input onkeyup="this.value = this.value.toUpperCase()" />
on it's own you'll see the field capitalise on keyup, so it might be desirable to combine this with the style='text-transform:uppercase' others have suggested.
Various answers here have various problems, for what I was trying to achieve:
Just using text-transform changes the appearance but not the data.
Using oninput or onkeydown changes the cursor position, so you can't, for instance, click in the middle of your existing input and edit it.
Saving the position works, but just seemed a bit kludgey.
It felt cleaner to me to just break the problem up into two parts: upper-casing what I'm typing while I type (text-transform), and upper-casing the submitted data (run toUpperCase onchange):
<input id = "thing" onchange="this.value = this.value.toUpperCase(); pr()" style=text-transform:uppercase /><p>
<b><span id="result"></span></b>
<script>function pr() {document.getElementById("result").innerHTML = document.getElementById("thing").value}</script>
Type something in that, hit return or click out of the input, then click in the middle of your previous entry, add some lc text, hit return...
IN HTML input tag just style it like follows
<input type="text" name="clientName" style="text-transform:uppercase" required>
in backed php/laravel use:
$name = strtoupper($clientName);
This will both show the input in uppercase and send the input data through post in uppercase.
HTML
<input type="text" id="someInput">
JavaScript
var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
someInput.value = someInput.value.toUpperCase();
});
As nobody suggested it:
If you want to use the CSS solution with lowercase placeholders, you just have to style the placeholders separately. Split the 2 placeholder styles for IE compatibility.
input {
text-transform: uppercase;
}
input:-ms-input-placeholder {
text-transform: none;
}
input::placeholder {
text-transform: none;
}
The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />
<input style="text-transform:uppercase" type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0"/>
I went with the style text-transform:uppercase thing from poster. Then I just did the uppercase thing in php as well. Some people working too hard with that javascript.
You were close with the style being in the wrong place. You were trying to uppercase an image instead of the input.
$name = strtoupper($_POST['Name']);
I don't know why I wanted to throw in some extra stuff if it's a php page. This is something I like to do make it smoother for the person filling out the form.
<input style="text-transform:uppercase" type = "text" class = "normal" name = "Name" size = "20" maxlength = "20" value="<?php echo $name; ?>"> <img src="../images/tickmark.gif" border="0"/>
That's assuming you're using PHP as the backend and posting to the same page you are on. This will keep the user from having to fill out that part of the form again. Less annoying for the person filling out the form.
Try below solution, This will also take care when a user enters only blank space in the input field at the first index.
document.getElementById('capitalizeInput').addEventListener("keyup", () => {
var inputValue = document.getElementById('capitalizeInput')['value'];
if (inputValue[0] === ' ') {
inputValue = '';
} else if (inputValue) {
inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
}
document.getElementById('capitalizeInput')['value'] = inputValue;
});
<input type="text" id="capitalizeInput" autocomplete="off" />
Just use this oninput in your input field:
<div class="form-group col-2">
<label>PINCODE</label>
<input type="number" name="pincode" id="pincode" class="form-control" minlength="6" maxlength="6" placeholder="Enter Pincode" oninput="this.value = this.value.toUpperCase()" autocomplete="off">
</div>
Just add in your input(style="text-transform:uppercase")
<input type="text" class="normal" style="text-transform:uppercase" name="Name" size="20" maxlength="20">
<script type="text/javascript">
function upperCaseF(a){
setTimeout(function(){
a.value = a.value.toUpperCase();
}, 1);
}
</script>
<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">
Related
I know about this way to send a input from the user to the typescript (angular) :
<form >
<input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" />
</form>
But its looking for not very effective , i create a reference to the DOM with #input and after that send the input.value .
After all, I am very confused about the input.value does he refer to #input or to to (input)=...;.
Bottom line, is there a more efficient way to pass the value the user puts into the box, into the typescript file and then use it for another tag in the HTML file?
For example the user put a size of text and i want to use with the use on another tag on HTML ....
I think you are trying to use angular input inside a html input tag, which is not possible.
You need to use a keyboard event handler like "keyup", "keydown"...
<input type="text" [(ngModel)]="inputColor" (keyup)="sendInput($event)" />
If i understand well, you re looking for $event ?
<input #input type="text" [(ngModel)]="inputColor" (input)="sendInput($event)" />
typescript side:
sendInput($event) {
console.log('input value:', $event.data);
}
But $event.data will only contain the last typed char, is it what you re looking for ?.
EDIT:
With (input), you can have the content of input in $event.target.value:
<input #input type="text" [(ngModel)]="inputColor"
(input)="sendInput($event.target.value)" />
First of you you have used ngModel with input, so your inputcolor will have that value, and you can use it. But if you want it passed to a method you can do it like :-
<input type="text" [(ngModel)]="inputColor" (change)="sentInput($event.target.value) />
Change event will be fired as soon as user is done typing and click anywhere else.
then have a sendInput method in ts to copy received value in a property
public sendInput(value) {
this.data = value;
}
OR
If you don't need two way binding, you can use ngModel for one way binding as well like :-
<input type="text" (ngModel)="inputColor" />
After this typescript value change will not impact, only change in template will be reflected in typescript variable.
<input type="email" ng-keypress="testFunc()" ng-model="text"
id="femail" class="form-control margin" name="femail"
placeholder="Email*"/>
<p style="color: red;">The input field has changed {{count}} times.</p>
JS
$scope.count = 0;
$scope.testFunc = function() {
$scope.count++;
};
HTML
<input type="email" ng-change="testFunc()" ng-model="text"
id="femail" class="form-control margin" name="femail"
placeholder="Email*"/>
<p style="color: red;">The input field has changed {{count}} times.</p>
JS
$scope.count = 0;
$scope.testFunc = function() {
$scope.count++;
};
If I input : "abc". Result should be : 3 but I'm getting : 0 if i delete using backspack I'm getting: 1 I should get count++ on each input which i'm not getting. I'm trying this example:
https://w3schools.com/angular/tryit.asp?filename=try_ng_ng-change
in my code. Thank you
Clarification:
In the above provided w3school example and my code difference was that I was using
<input type="email">
and w3 was using
<input type="text">
So for "text input" each button press was considered as a change but in my case each change occurs when the email is changed or it has some different functionality for ng-change with
"input type="email".
So I got the counting right now by taking
<input type="text" />
I just copy/pasted the example from W3(you provided) to test.txt file and renamed it test.html and run in Firefox. All worked fine. I did not have to edit anything. Try what I did first then you will know if it a typo or anything else. But the code is working correctly.
You can use
<input type="text" />
This is much better solution for your counter to work on.
If you want a counter use type="text" not "email". Browser treat both of them differently.
I have an <input> element with pattern validation.
<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" style="text-transform:uppercase" required/>
The pattern matching works if a user inputs all uppercase characters but fails if any is lowercase. Why is pattern matching not considering style="text-transform:uppercase"?
The text-transform is only a visual change, not a data change.
See the following example to debug the <input>:
function debug()
{
let inpItem = document.getElementById('some');
let inpValue = document.getElementById('some').value;
//alert the actual value on input.
console.log(inpValue);
//set text-transform to default.
inpItem.style='text-transform:none';
}
input {
text-transform:uppercase;
}
<button onclick="debug()">Debug</button>
<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" required/>
How you can only input in uppercase?
You can use JavaScript to set all input values to the uppercase value.
function debug()
{
let inpItem = document.getElementById('some');
let inpValue = document.getElementById('some').value;
//alert the actual value on input.
console.log(inpValue);
//set text-transform to default.
inpItem.style='text-transform:none';
}
<button onclick="debug()">Debug</button>
<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" onkeyup="javascript:this.value=this.value.toUpperCase();" required/>
Pattern ignores text-decoration: uppercase; because it's only styling and original text is still formatted in the way it was inputted.
You should change your pattern to check both uppercase and lowercase symbols.
^[A-Za-z]{5}$
I don't know exactly why this is happenning, maybe the pattern is processed before the style is given to the input text, but I see you are trying to create a pattern to accept up to five latin characters(uppercase or lowercase, since you are changing them all to uppercase), so why don't you just add lowercase letters to your pattern?
pattern="^[A-Za-z]{5}$"
Your regex will work only if there are 5 consecutive uppercase letters, you can check it here http://regexr.com
In a simple webpage, I am trying to grab the value of an input field as it's being typed and display it simultaneously within the context of code.
So a user could past an URL into the input field and it immediately update the code displayed, so he can easily copy the update code. For example:
<input type='text' name='typedURL'>
Here is your code: copy this
I searched all over the internet and am under the impression that the best solution is using this:
<form onsubmit="return false" onkeyup="o.value = a.value">
<input name="a" id="a" type="text" step="any">
<br>
Here is your code:
<code>
</output>">Copy this code
</form>
But I can't get it to output the value PLUS the surrounding code.
You can do selecting input value (with querySelector and .value), and change attribute href in JS replacing with .value.
Here the code:
var input = document.querySelector(".valore");
var link = document.getElementById("href");
input.addEventListener("keydown", function() {
link.innerHTML = input.value;
link.href = link.innerHTML;
});
<input type="text" class="valore">
I'm facing the well known Chrome's "not-focusable-input" error but my situation is different from the explained in the other post I could find there.
I have this error message duplicated first on a well pointed input, this input has no required attribute:
The code:
<fieldset>
<label>Total (montaje incl.)</label>
<input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>
The error:
An invalid form control with name='priceFinal' is not focusable.
While the user is filling the form this field gets its value by a js script with jquery. The user type a size in another input, the script do its maths with the size value and then put the outcome in the 'priceFinal' input with the jquery function: .val()
In the browser we can see that the input is correctly filled and no errors are displayed at that time. And with the 'novalidate' solution everything goes fine, so it couldn't be responsible for the nofocusable error, I think.
Then I got the same error with an input with no name which I didn't write and doesn't exist in my DOM:
An invalid form control with name='' is not focusable.
This is weird because the only input without name in my form is the type:submit one
<input type="submit" class="btn btn-default" value="Ver presupuesto" />
I have a few required fields but I've always checked that their are all filled when I send the form. I paste it just in case it could help:
<fieldset>
<input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos" class="cInput" required >
<input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
<input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>
<fieldset>
<input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
<input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required>
</fieldset>
The novalidate solution clears the error but it doesn't fix it, I mean there must be a way to solve it with no hacks.
Any one have any idea of what's might going on?
Thanks
I had the same problem, and everyone was blaming to the poor hidden inputs been required, but seems like a bug having your required field inside a fieldset.
Chrome tries to focus (for some unknown reason) your fieldset instead of your required input.
This bug is present only in chrome I tested in version 43.0.2357.124 m.
Doesn't happen in firefox.
Example (very simple).
<form>
<fieldset name="mybug">
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<input type="submit" name="submit" value="send" />
</fieldset>
</form>
An invalid form control with name='mybug' is not focusable.
The bug is hard to spot because usually fieldsets don't have a name so name='' is a WTF! but slice piece by piece the form until I found the culprid.
If you get your required input from the fieldset the error is gone.
<form>
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<fieldset name="mybug">
<input type="submit" name="submit" value="send" />
</fieldset>
</form>
I would report it but I don't know where is the chrome community for bugs.
Thanks to this post, I saw that my problem also rested with Chrome trying to focus on my fieldsets, instead of the input field.
To get a better response from the console:
Assign every DOM element a new name
Set every input & select style.display to 'block'
Changed the type of input[type="hidden"] elements to 'text'
function cleanInputs(){
var inputs = document.getElementsByTagName( 'input' ),
selects = document.getElementsByTagName( 'select' ),
all = document.getElementsByTagName( '*' );
for( var i=0, x=all.length; i<x; i++ ){
all[i].setAttribute( 'name', i + '_test' );
}
for( var i=0, x=selects.length; i<x; i++ ){
selects[i].style.display = 'block';
}
for( var i=0, x=inputs.length; i<x; i++ ){
if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
inputs[i].setAttribute( 'type', 'text' );
}
inputs[i].style.display = 'block';
}
return true;
}
In the console, I ran cleanInputs() and then submitted the form.
The result, from the console, was:
An invalid form control with name='28_test' is not focusable.
An invalid form control with name='103_test' is not focusable.
Then, switching over to the Web Developer "Elements" view, I was able to find "28_test" and "103_test" (both fieldsets) -- confirming that my problem was a required input field, nested inside a fieldset.
While I was writting the question I realized one thing: the value the script was putting into the 'priceFinal' field sometimes was a decimal number.
In this case the solution was to write the step attribute for this input:
... step="any" ...
Step on w3s
So this 'nofocusable' bug is not only a required and hidden fields issue, it's also generated by format conflicts.
Nach gave me the best pointer... (y) I also had a input type="number" with step="0.1" and the console shows me this error while validating: An invalid form control with name='' is not focusable.
remove the step="0.1" on the element and now the form can be validated
I had the same issue so I removed required="required" from the troublesome fields.
If you get the error when jQuery function is executed, try to put "return false" on your function, or function(e) { e.preventDefault(); ... }
i had this issue once. to fix it, add
novalidate
as an attribute to the form. e.g
<form action="" novalidate>
....
</form>
In my case, the input element did not have a required attribute but it was hidden. and the problem was while it was hidden, it had a value in it. I guess if an input field is hidden it shouldn't have a value too, aside required attribute.
When I remove the value through my javascript code, everything works fine.
Element is hidden, No required Attribute, No value. Worked
Here is the solution....
<form>
<input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>
Many people do not realize that passing false into ng-required disables the directive.