html onchange super slow - javascript

this code worked for me super slow in chrome and firefox on a mac.
<!DOCTYPE html>
<html lang="en">
<head>
<title>TextArea</title>
</head>
<body>
<label for="txtarea">Input</label>
<input type="text" id="txtarea" size="30" onchange="setText(this.value)"/>
<p>Content Value</p>
<label id="lbl_content"></label>
</body>
<script>
let lbl = document.getElementById("lbl_content");
function setText(value) {
lbl.innerHTML = value;
}
</script>
</html>
any reason why it is takes a couple of seconds ?

It should work normally. If your intention is to change the value in the label whenever the user hit a key you should use onkeyup instead of onchange.
Because onchange is fired whenever the element loses focus, while onkeyup is fired whenever the user hit a key, BUT if a user input a value using autofill onkeyup wont be triggered however onchange will be triggered.
So I would recommend you to use both events.

Related

onblur function doesn't work in google chrome and firefox

I am working on mvc application. During development I got a very strange issue, I have three text box and on each one, I need to call onblur event.
when I execute the code, event is called for first text box only, not for second and for third text box again event is called . Here is my code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#a1,#a2,#a3").blur(function(){
alert("This input field has lost its focus.");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" class="c1" id="a3">
<br><input type="text" class="c1" id="a1">
<br><input type="text" class="c1" id="a2">
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>
</body>
</html>
I think that there may be some blocking of the alert happening in your browser/sandbox, but the onblur works fine (try just console logging what you are currently showing the alert for).

Mobile HTML text input autocomplete doesn't reset when focused and reset

Trying to build a simple HTML/JS chat functionality and when a user selects "submit" the message is sent and the focus is on the text input, cleared. However, the autocomplete remains from the last word (on mobile). I want the autocomplete feature but need it to CLEAR on submit and reset.
<!DOCTYPE html>
<html>
<body>
<h1>The autocomplete remians on reset</h1>
<form>
<input type="text" id="message" name="message" ><br><br>
<input type="reset" onclick="myFunction()">
</form>
<script>
function myFunction() {
document.getElementById("message").value ='';
document.getElementById("message").focus();
}
</script>
</body>
</html>
After much searching, I think the answer is YOU CANNOT DO IT programmatically. It appears that on mobile, iPhone at least, ONLY the user keyboard commands like RETURN or Backspace can affect the autocomplete. I solved the issue by hiding the button on Mobile and forcing the user to use the keyboard. So basically NO reset button on mobile.

Jquery: function on .blur() of form, not elements

I've searched around the community, and see there is a lot of guidance on how to make on(blur(function)) or on(focusout(function)) for form elements, but I have not seen a blur element kick in when a form itself loses focus. I want that kind of behavior that relies on two fields being updated before submit, but if I valid on a field onblur() it will give a false error, because the user didn't have the chance to update the other field.
Here is the code of my basic concept:
$(document).ready(function(){
$("form").blur(function(){
alert("This form has lost its focus.");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
Enter your name: <input type="text">
Enter your age: <input type="text">
</form>
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>
</body>
</html>
If I have the .ready statement focus on "input" instead, it works fine, but is totally unresponsive when I want the document to monitor the overall form instead. Any Ideas? Thank you!
The event you are looking for is not blur it's focusout. If we bind a focusout event to the form itself, the handler will be called whenever focus is lost on any element inside the form.
Also note that the tabindex attributes I added to the various elements have nothing to do with this code working. They were added because an erroneous comment was made on your post claiming that forms can't be focused.
From here tabindex
The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name). It accepts an integer as a value, with different results depending on the integer's value:
A negative value (usually tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. Mostly useful to create accessible widgets with JavaScript.
As you can see any element can receive focus. It's just that only some elements will receive focus by default (anchors, inputs, buttons, etc...) without setting a tabindex for them. In the example below, if you click on the "Enter your name" text you will see the form itself gain focus. You can then tab to the inputs, then the div and finally the span. All of them receiving focus in turn.
$('#theForm').on('focusout', function(e) {
// do what you want/need to do here
console.log('Form has lost focus');
});
#theDiv {
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="theForm" tabindex="1">
Enter your name: <input type="text" tabindex="2">
Enter your age: <input type="text" tabindex="3">
</form>
<div id="theDiv" tabindex="4"></div>
<span tabindex="5">Some Text</span>
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>

Chrome onChange event not firing for cleared field after form reset

It seems that chrome is not firing a change event when a text field has been cleared just after the form has been reset.
Here is the code:
<html>
<head>
<script>
function doChange() {
document.getElementById('info').innerHTML = 'Field changed to:[' + event.target.value + ']';
}
</script>
</head>
<body>
<form>
<input type='text' value='test1' onChange='doChange();'/>
<input type='text' value='test2' onChange='doChange();'/>
<button type='reset'>Reset</button>
<div id='info'></div>
</form>
</body>
</html>
See http://jsfiddle.net/ahc6fpuw/ for the test bed.
Is this a know issue and if so is does anyone have a work around?
Add steps to create the problem:
1 Enter some text into the first text field
2 Press the reset button (that resets the text correctly)
3 Select all the text in the first field and press the delete key
4 Press the tab key to move to the second text field. The doChange function should have been called but it is not.
Reset gives the default value to the html element, in your case it is "test1" & "test2", so even if you do reset it will show the "test1" & "test2".
The reset button doesn't clears the text inside the form it just resets to given value.
Try placeholder instead value attribute
<form>
<input type='text' placeholder='test1' onChange='doChange();'/>
<input type='text' placeholder='test2' onChange='doChange();'/>
<button type='reset'>Reset</button>
<div id='info'></div>
</form>

Putting focus on a textbox in onchange event

I am trying to get it so that when a certain value is put into a textbox, the focus will stay on the textbox(and an alert will be shown in production). I am trying to get this to work in Firefox 3.5.7 with no luck.
How can I make it so when a textbox is a certain value at onchange that it will stay focused/refocus on the textbox?
Live example is at http://jsbin.com/ipina
<body>
Enter your name: <input type="text" name="fname" id="fname" onchange="
if(this.value=='foo'){
this.select();
this.focus();
}
" />
</body>
Also, I don't get any javascript errors or warnings in the Error Console on executing this code.
When the onchange event is fired, the user is focused on the textbox.
Maybe you might want to use the blur event to re-focus on the textbox if the value is 'foo'.
If you need instantaneous results, you should use onkeyup.
<body>
Enter your name: <input type="text" name="fname" id="fname" onkeyup="
if(this.value=='foo'){
this.select();
this.focus();
}
" />
</body>
According to Javascript onchange different in IE and FireFox I needed to set the focus after the onchange event occurs, so I had to end up with something like this:
Enter your name: <input type="text" name="fname" id="fname" onblur="
if(this.value=='foo'){
alert('bah');
setTimeout('document.getElementById(\'fname\').focus();document.getElementById(\'fname\').select();',0);
}
" />
And also I had to catch it when the focus was lost, not necessarily when the text was changed, so I had to use onblur instead of onchange.
Live: http://jsbin.com/ofeva

Categories

Resources