preventDefault does not work on focus event
Question
I am trying to design a form such that if it has a certain class, the user should not be able to interact with any of the inputs. For various reasons, I would like to avoid using the "disabled" attribute. I am trying to prevent the default on the focus event and it is not working. I tested this in recent versions of Firefox, Chrome, and Android. I tried various combinations of events, such as "click change touchstart focus focusin". I tried puting "return false;" in the handler. Does anyone know why this is happening and how to make it work?
<!DOCTYPE html>
<html><head>
<title>input test</title>
</head>
<body>
<form class="disabled">
<input type="text">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(".disabled :input").bind("focus", function(e) {
e.preventDefault();
});
</script>
</body></html>
You can see an example at http://jsfiddle.net/54Xka/
EDIT: This will be on a site intended mostly for mobile browsers. I am planning to disable the inputs when a modal dialog is showing. The modal dialog is implemented using my own code. It is something very simple that shows and hides a div.
EDIT 2: This is what I have now:
$(".disabled :input").live({
focus: function() {
$(this).blur();
},
change: function(e) {
e.preventDefault();
}
});
It has some minor aesthetic issues but it works. When I have more time, I may try jfriend00's idea with the transparent gif, or something similar to what the jQuery UI dialog widget does, or maybe actually using the jQuery UI dialog widget to implement the dialog.
3 answers
solution1
5 2011-07-18 22:48:02
you may use
this.blur();
...instead.
solution2
5 2011-07-18 23:14:59
For text fields, the best thing to do is to set them to read only. This still allows tabbing and copying, but not modification.
<input type="text" readonly="readonly" value="Can't change me">
If you also want to stop tabbing, then a proper functioning web page supports keyboard navigation among the objects on the page intended for keyboard access. That means that any option that just simply tries to block the focus will interrupt any attempt to navigate the web page via keyboard. As such, it's best to block tabbing between items by telling the browser that this object is not intended as a tab stop and it will happily just skip over it when the tab key is pressed. You can do so by settings tabIndex to -1 on the object. Keyboard navigation will never stop on it then, but will otherwise work as intended.
<input type="text" readonly="readonly" tabIndex="-1" value="Can't change me or tab to me">
If you're using different types of objects than text fields, then please be more specific about what types of objects. You should pursue the HTML attributes that support your intended behavior before resorting to scripts that mess with the expected functioning of the web page. It may also make sense to use something other than a usereditable tag to just display data (like a div) too if you don't intend for the user to be able to interact with it.
You can see examples of readonly and tabIndex fields here: http://jsfiddle.net/jfriend00/9wWkQ/
Now, it sounds like we have moving specifications. Now you're saying you don't even want them to be able to select text. That can be done even in a plain div that isn't editable. If you want to block all user access including even selecting of the text of individual fields, then you will have to resort to something like putting a blank transparent gif image over the top of the area of your form. That will block all mouse interaction with the fields and combined with readonly and tabIndex should block all keyboard access too.
solution3
0 2021-11-13 08:04:53
You cannot prevent default, but you can immediately restore focus to the previously focused element (which is almost the same as if the element did not receive focus). This is easily doable as relatedTarget property of FocusEvent contains reference to the previously focused element.
element.addEventListener('focus', (e) => {
if (e.relatedTarget) {
e.relatedTarget.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.