After each form input element, I need to do a verification using the same script.
I used onblur=myFunction("name") (where name is the name= attribute for the form field) in each form element so when the user presses <tab> the cursor advances to the next entry field.
The problem is that Firefox (Linux 93.0 - 64 bit) fires the onblur event ONLY on odd-numbered form input fields. The even numbered ones lose focus without executing the event handler.
Sometimes, but not always, I can force the event to fire by clicking on a different form input field, or rotating out and back into the form. This is very consistent.
Here are two example sequential fields from the real form, 'fname' fires the event, 'lname' does not.
There is a total of 17 named input fields. The style for these fields does not reflect the "unfocused" state after the cursor exits the field either.
<label for="fname" class="shipping">First Name</label>
<input type="text" class="shipping" name="fname" id="fname" maxlength=24 size=20 placeholder="First Name" autofocus onBlur=field_check("fname")>
<label for="lname" class="shipping">Last Name</label>
<input type="text" class="shipping" name="lname" id="lname" maxlength=48 size=30 placeholder="Last Name" required onBlur=field_check("lname")>
How to fix this issue?
Thank you to those who responded, even though nobody had an answer. I did a lot of testing and found that the problem is interference between the CSS styles and the inline onBlur, onChange, etc. When these are removed all works as expected although I can no longer determine when a field has been completed. Testing, I found that Firefox (Linux and Windows) will respond to every second event, so alternate lines do not get styled and do not report data entry. Chrome on Windows will hang after the third field is entered and the pop up cannot be dismissed without closing the browser. An old version of Internet Explorer (!) worked exactly as expected but I couldn't test either Edge or Safari since I don't have them installed here.
Overall, there seems to be some disconnect between the documentation and the implementation on mainstream browsers but I have run out of time to try and find it so I'll have to find a "plan B".
Related
I am trying to attach a click handler on an input, but for some reason it doesn't work for first click on inputs that get autosuggestion in safari. All other clicks after the first one work. So for example if an input has a name or label before it saying First name, Last name, Email or anything similar Safari will put a suggestion widget at the end of the input and suggest my information that is in Keychain Access I guess. Click event will not trigger the first time I click on that input, after the first one it triggers ok.
Here is the code that produces this issue. Basically I need a way to trigger a click event on inputs every time it gets clicked (preferably vanilla js, but jquery would be ok too).
HTML:
<form>
// Click on this input doesn't trigger the first time I click it because Safari has a suggestion widget for this input
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="you#example.com" data-input="">
// Click on this input triggers every time I click it with no issue
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required="" data-input="">
</form>
JS:
var inputs = document.querySelectorAll('[data-input]');
var myFunction = function(event) {
console.log('Clicked');
};
for (var i = 0; i < inputs.length; i++) {
// I put this console.log here to see if all of the inputs pass through this for loop to get the event listener and they do
console.log(inputs[i]);
inputs[i].addEventListener('click', myFunction);
}
EDIT: even though #gopigorantala's link in his comment might be considered duplicate, I am not looking for the same thing that question is looking for. That question asks for a way to disable safari autosuggestion feature on inputs, I am looking for a way to detect clicks on inputs despite autosuggestion being there.
Any one have an idea how to disable auto fill in chrome
I have used for sure $("#my_input").val() it works fine with Firefox but not Chrome
I have used jquery $("#form").disableAutoFill() autocomplete="off"
any suggestions
Not just removing from the input , i want aswell no suggestions from chrome
To disable Chrome autofill and suggestions in items which have a valid autofill value such as name or email, add autocomplete="nope".
<input type="text" autocomplete="nope" name="email">
In cases where you have previously saved values that are showing dropdown suggestions, for example in a column of numbers in an accounting page, use JS to change the names of the inputs.
<input type="text" data-name="my_inputname">
An example of how you would do this with jQuery:
https://codepen.io/btn-ninja/pen/EBmNQb
In cases where you want the autocomplete to work, here is documentation on valid autocomplete values:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
I'm having a small issue dealing with number inputs on forms, specifically when trying to call a validation js function when the user modifies them.
<input type="number" name="somenumber" onkeyup="validateForm()" />
This method only calls if the user types a number in the box and is ignored when the user uses the up/down buttons supplied by the browser. So it isn't fully effective.
<input type="number" name="somenumber" onchange="validateForm()" />
This method works great for users using the up/down buttons, but if they type a number into box, it won't execute until they move to another element or click outside the box. It's not the end of the world, but I'd like users to be able to type in the box and immediately be able to click the currently disabled submit button, rather than having to click elsewhere to enable the button.
<input type="number" name="somenumber" onchange="validateForm()" onkeyup="validateForm()" />
So to get the best possible user experience, I'm doing this. The problem is that the function often gets called twice. It works fine I guess. The users don't even notice it's running twice. Still, it seems like I'm missing something and there must be some "right" way to deal with this.
Is there? Or is this just one of those things we have to work around?
You could use the oninput event.
function validateForm() {
console.log('changed');
}
<input type="number" name="somenumber" oninput="validateForm()" />
I have a form where an admin can add candidates. When I run my application in IE8, and click on reset button, it removes placeholder from all the fields. I am using placeholder.js to support placeholder property in IE8.
Here is my reset function ...
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
}
My form is like that ....
<form name="addCandidateForm" id="addCandidateForm" method="Post">
<input type="text" name="cname" id="cname" class="inputBox bdr-radius5" placeholder="Enter candidate name" autocomplete="off"/>
.....
.....
<span class="global-button" onclick="resetCandidateData();">Reset</span>
</form>
First time when page refresh, it showing placeholder in each of my textfields in IE8 but after reset all are vanish. Please help.
I don't know anything about the specific placeholder.js library that you're using, and you didn't provide a link, so I can't even tell which one it is.
However, it sounds to me like you need to use a better placeholder script.
If resetting the fields clears the placeholders, then it means that the script is using the field value to display the placeholder.
This is fine, but does have some limitations, in particular as you've seen with resetting the fields, but it also means that you can't have placeholders on a password field (because they would show up as stars like the password itself), and you can't easily have the placeholder styled differently to the field values.
For all these reasons, I prefer a placeholder script that uses a different technique - eg putting the placeholder in its own element and displaying it on top of (or behind) the input field, rather than actually using the input field itself for the placeholder.
So therefore my advice is to find an alternative placeholder script. It should be fairly straightforward to take one out and plug another one in, and there are plenty of them out there to pick from. Take a look here for a list of some of the best ones.
Hope that helps.
Change your resetCandidateData function to
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
$.Placeholder.init();
}
It should restore the placeholders.
We are currently using jQuery to trigger a recalculation on a form input field. Using HTML5 we get nice spinboxes in Safari (at least on 5.0.3 Mac). However updating the field with the spinbox controls doesn't seem to trigger a change event at all. It's like the field hasn't been updated. Is this just an oversight in WebKit? Or are there ways around this?
Edit: Changing the spinbox doesn't even trigger an input event.
You want to use the oninput event. Use something like $("...").bind("input", fn);.
See http://msdn.microsoft.com/en-us/library/gg592978(VS.85).aspx
$.click() works fine. If you click and hold, it doesn't until you release.
change event is triggered when input lost focus and the value is changed, by clicking the spinbox, input does not lost its focus, so change event will not fired.
This works for me in Chrome 11 and Opera 11.10:
<fieldset class="col" oninput="exoutput.value = exnumber.valueAsNumber * exnumber.valueAsNumber;">
<legend>Output event handler</legend>
<label for="exnumber">Number: </label>
<input type="number" id="exnumber" placeholder="Enter a number" min="0" value="4" required>
<label for="exoutput">Output: </label>
<output for="exnumber" id="exoutput">16</output>
</fieldset>
Firefox 4 doesn't do valueAsNumber, but a minor change makes it work in all three. Sorry I don't have Safari available to test on right now.