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).
Related
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.
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.
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>
When my JSP page gets loaded, the button (actually an image button with onfocus property) gets focused. So, on pressing enter it gets clicked. It is a small, part of a bigger problem. How can I make the button lose focus when page is loaded?
<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input type="text" src='Create.gif' >
</br>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>
Both the alert box for nothing and not done has been shown.
You can use the autofocus HTML attribute (specification reference) to automatically focus a different element on page load. I'm not sure how this would get applied with JSP, however in pure HTML this would be something along the lines of:
<button>My Button</button>
<button autofocus>My Other Button</button>
Here's a JSFiddle demo.
I would modify this line :
<input type="text" src='Create.gif' >
to
<input type="text" id="textbox" src='Create.gif' >
<script>
//$('#textbox').focus() //If your using jQuery
document.getElementById('textbox').focus()
</script>
This would shift the focus to the text box rather than the image button
Give your textbox an id and use that id to set the focus to that element.
document.getElementById('textbox').focus()
I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.
Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>
Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>