I use this to detect enter:
<input type="submit" name=hiddenbutton value=enter style="display: none">
When this is placed before all other form elements, then I get the appropriate $_REQUEST[hiddenbutton]when enter was used to submit the form.
Except with Chrome and other Webkit-based browsers, which don't activate the first button when enter is pressed.
Is there a way to make it work on all browsers? (preferably with as little JavaScript as possible)
I would recomend adding a focus listener to make sure the user is not justdoing something completely different like typing in a word document, because some browsers will detect key clicks without focus
Related
I need to remove the browser's autofill/suggestion feature.
This autofill is disabled using autocomplete="off" in Textfield component. once I do that this brings browser's auto fill feature
In Edge, If I turn off the "Save and fill the personal info" option in "Settings/Profile/Personal info" the above suggestion is not shown. Is there any way without turning off that setting I can remove the autofill feature using Material UI TextField property or CSS property "input:-webkit-autofill"
If autocomplete fails to work, most likely it's a bug or for some reason, react is preventing the attribute from being modified.
However, I know a simple way to bypass by changing the type attribute to something random, where the browser can't understand what it should ask from the user and therefore, the browser can't prompt an autofill.
For example on a standard HTML input tag:
<input type="inputText"/>
This will still treat it as an input field, however, it will not attempt to autofill.
Its browser functionality which you cant handle from code level. If you want to prevent it than you have to made setting changes in browser
Turning Off Autofill in Chrome
Click the Chrome menu icon. (Three dots at top right of screen.)
Click on Settings.
In the "Autofill" section, expand the area for which you wish to disable Autofill.
Toggle the setting OFF if it is on. The system will automatically save your settings.
More details found here => https://support.iclasspro.com/hc/en-us/articles/218569268-How-Do-I-Disable-or-Clear-AutoFill-AutoComplete-Information-
So for html you can simply put autocomplete="new-password" in your
Auto-complete="off" can also be used nut it has some drawbacks.
Banks and other security institutes turn auto complete off .Problem is user change frequently their passwords and fields and use simple passwords to remeber.So auto complete is good feature in these cases.
But you can try this solution if you want .I hope it will work fine
<input type="password" autocomplete="new-password">
you can add autocomplete="off" to your form or input but many modern browsers do not support autocomplete="off" for login fields
but you can prevent it using autocomplete="new-password"
Preventing autofilling with autocomplete="new-password"
for more information check this link
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields
Its most likely a bug, the solution I've found works best is to have auto-complete have a hard coded random value which will prevent a user from using auto-complete...
Try this:
<input type='password' name='pass' autocomplete='password' />
In terms of the auto-complete value you can have anything you want there.
New edit:
<script>
// Execute this code when page is
// totally loaded
$(document).ready(function () {
/* Setting the autocomplete of
input field to off to make
autofill to disable */
$("#name").prop("autocomplete", "off");
});
</script>
I have a simple registration form based on Material UI and React Final Form.
Email and password inputs are filled automatically by Chrome autofill if it is possible. The email field has autofocus on it. When the form is autofilled, inputs become "blocked" for mouse interaction (I cannot not place or see caret, cannot select part of email, no autofocus is applied), yet it is available for drag-and-drop copy with mouse and keyboard interaction. I have no idea how can this happen and do not understand, how to provide code for reproduction. Maybe some autofocus issue? Hope that anyone could help.
I have a simple form. It contains an input of type "FILE" and a submit button. It is undergoing 508 compliance testing, and they have a problem.
If you tab to the FILE input and press the enter key, IE submits the form. It is my understanding that this is the correct behavior. I'm not doing any Javascript or anything to intentionally change the behavior of the keypress.
Our 508 testers disagree, and think that pressing enter in the FILE input should open the browse dialog. I haven't found anything conclusive, but I was hoping someone could clarify for me. Sample of the form is below.
<form id="upload_Form" METHOD="POST" ENCTYPE="multipart/form-data" action="" NAME="uploadForm">
<INPUT TYPE="FILE" NAME="filenames" id="filenames" title="Select File for Upload">
<input type="submit" value="Upload"/>
</form>
Actually, it's the matter of consensus. I personally think that using the enter key instead of space to trigger a browse dialog is a correct behavior in terms of accessibility — more intuitive for a regular user, let's say.
That's why WebKit is doing that, instead of submitting the form, when the upload input is focused.
A simple jQuery workaround as a fix for IE:
$(document).keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
$('#upload-form').click();
}
});
Demo Fiddle
In the <input type="file"/> element, in modern browsers the focus goes to the button that invokes the file selection dialog. Hitting enter in that instance should invoke the dialog instead of submitting the form. IE, of course, does things their own way. I would be inclined to conform IE to standards rather than the other way around.
But more the point, why would you ever deliberately submit the form if that field hasn't been filled? It's a validation error at best.
This a pretty simple question (I assume). Probably a repost, but I couldn't find the answer here... so here we go.
I have a checkbox on a page that I want to default to "unchecked" (unless I specify otherwise in my php).
When I refresh the page, if the box was checked, it will stay checked which is no-bueno because checking the box adds a dom element to my page via a function attached to the box. So the problem is if I refresh, the box is still checked, but the dom element doesn't exist (because I haven't fired the function and I don't want to unless the user checks the check box) but the box is ALREADY checked and I end up in opposite land where UN checking the box creates my dom element and checking it removes it.
Basically, the question is...
Is there a way to default a checkbox to unchecked without javascript?
BTW I haven't checked (no pun intended) in any browsers other than FF 3.5.10
See http://weblogs.mozillazine.org/gerv/archives/2006/10/firefox_reload_behaviour.html
(first comment):
It’s done that way on purpose so if you tap the refresh button you
don’t lose your work. There’s an entry in Bugzilla somewhere that’s
been WONTFIXed asking for a regular refresh to always reset the form
entirely. Basically it’s a backwards-compatibility thing — every
browser since NS1.0 (maybe even Mosiac) has done that.
Dynamically-generated pages don’t even reset themselves, though if the
expiration is set to 0 and you hit the back button it will give you a
fresh form. Also, if the form itself changes (add or remove elements,
change the action, etc.) the for will reset on a reload. I haven’t
tested it, but setting the form name to something random (assuming you
don’t need the name for JS access) might just work. Like ”> in PHP.
As you said, forcing a refresh clears the form, and resetting it does
too. Would something like do
what you want (again, not tested)?
this works for ie
autocomplete="off"
Sure:
document.getElementById('my_checkbox').checked = false;
Oops, I missed the part about no JS. As far as I know, Firefox retains page state on refresh, so I guess there's no other way.
In fact, you just have to add the <form> tag with attribute autocomplete="off":
<form autocomplete="off">
<label for="checkbox">
<input type="checkbox" id="checkbox">
</label>
</form>
You can use the parameter autocomplete="off" directly on the input tag
Consider the following HTML:
<form action="">
<input />
<select>
<option>A</option>
<option>B</option>
</select>
<input type="submit" />
</form>
If the focus is on the input (text box) and I hit enter, the form submits.
But, if the focus is on the select (dropdown box) and I hit enter, nothing happens.
I know I could figure out some JavaScript to override this, but I want to know why hitting enter doesn't just work?
Is there something I would break by capturing the enter with JavaScript (maybe some native keyboard accessibility of the dropdown)?
It's simply the nature of the control. The Enter key (or a mouse click) is what makes the selection. To submit the form when pressing Enter would result in a poor user experience, since the form would essentially be unusable.
I would not recommend changing the behavior via JavaScript, simply because the default behavior is the norm and what everyone will expect.
(Imagine what it would be like if every form submitted when you made a selection in a drop-down list. Consider searching on Amazon.com, for example. One selects a category then enters the search term. If one selected a category by pressing Enter, the form would submit before the search term could be entered.)
The select tag is pretty funny. The only thing the Enter key does is once you click the dropdown open and use the arrow keys to select an option you can hit enter to close the dropdown menu.
What boggles my mind is that the W3 spec. does not state what the enter key should do and every browser does it the same way! The browser programmers could have done one of the following.
Enter when focused on a closed dropdown select would:
Open the dropdown so you could key through it while seeing all options.
Would submit the form.
Yet everyone decided to not change it... What is even more amazing is that I have been designing websites for 13 years and it wasn't until today that I noticed this when I got a bug fix from the Business Analysts saying they could not submit the form when they hit enter! Reminds me of the Tiny Pony.
http://www.w3.org/TR/html401/interact/forms.html