简体   繁体   中英

How to make a button lose focus when page is loaded

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 show

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()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM