Fiddle here. Starting with html elements in the below given structure, safari for some strange reason could not enable all input elements. It just enables the first one only. Might be some bug?
<fieldset disabled><div>
<div><fieldset disabled>
<input type="text" disabled>
</fieldset></div>
<div><fieldset disabled>
<input type="text" disabled>
</fieldset></div>
</div></fieldset>
Javascript here:
$('fieldset').prop('disabled',false);
$("input").prop('disabled',false);
To make Safari correctly enable all inputs you should enable all fieldset from the inside out, so the nested ones first:
const fieldsets = document.getElementsByTagName('fieldset');
Array.from(fieldsets).reverse().forEach(fieldset => fieldset.disabled = false);
Complete codepen with some an extra use case with fieldsets.
This was tested on Safari 13.0. This is definitely a bug and I will report it to Apple.
Related
I want to disable google chrome's persistent autocomplete in all browser for user experience (my Chrome version is 76).
I have tried many solution including :
1). The answers from
Chrome ignores autocomplete="off"
2). All the answers from
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
which include
1). Autocomplete="off", autocomplete="somerandomstring"
2). create another fake input above it with hidden style
3). wrap it with invisible div
It seems that the answers from both links are the solution for the outdated version of google chrome almost likely older than 76 chrome version.
<input name="number" type="text" class="form-control search" placeholder="No. Invoice" >
//this input is getting filled with persistent google chrome autocomplete
Expected Output : not filled with autocomplete
Actual Output : filled
Thank you in advance!
I just came across this same issue and none of the original answers seem to work.
As i use the placeholder text, I came up with a solution of adding the placeholder text as the value if the value is blank, as well as changing the color and then use the onfocus event to remove the value if it's equal to the placeholder and remove the color.
Here is an example:
<input type="text" class="form-control" id="search" placeholder="Search Users" value='Search Users' style="color: #6c757d;" onfocus="if (this.value == this.placeholder) {this.value=''; this.style.color=null;}">
The things that you would still have to look out for:
You need to add this to each input.
You need to check input isn't equal to placeholder on validation.
There is one other solution that i found worked:
Add a value to empty input and then remove it using a timeout, this should happen after the autocomplete has run.
html:
<input type="text" class="form-control NoAutoComplete" id="search" placeholder="Search Users" value='Search Users'>
CSS:
.NoAutoComplete {
color: #6c757d;
}
JS:
setTimeout(function () {
$(".NoAutoComplete").val("");
$(".NoAutoComplete").removeClass( "NoAutoComplete" );
}, 1000);
i haven't done to much looking in to this, but you should be able to add a class to all inputs that need not have a value and then delete all values and class at the same time.
I'm trying to use the default date type in HTML5, but this is not fully supported by Safari and FireFox, my workaround using jQuery is also not working.
I have this in script.js
$(document).ready(function(){
if ( $('#date1').type != 'date' ) $('#date1').datepicker();
});
In the form, I have this:
<script src="js/script.js" type="text/javascript"></script>
<input id="date1" name="date1" required="required" type="date" value="MM/DD/YY"/>
When I load the page in Safari/Firefox, I see no error, I also inspect elements, no error.
What am I doing wrong?
JQuery has a .type function, however it is not being properly used in your example, nor is it relevant. What I believe you want is the element's type property, which can be achieved like so:
$(document).ready(function(){
if ( $('#date1').prop('type') != 'date' ) $('#date1').datepicker();
});
Here is a JSFiddle comparing .type to .prop('type'): https://jsfiddle.net/hczg6uyf/1/
Here is a JSFiddle of your fixed code, supplied by Tom in the comments below: https://jsfiddle.net/51wLrxy0/1/
Well after reading that this is not supported on Safari and IE , i got a work around that im happy with.
My problem is that on Safari i could not even click on the input field. So user cant even manually add a date, and if he could there was no placeholder text to tell him its a date input field.
My Sulotion:
Add a placeholder, chrome will ignore this. Then also add a min-height to the input and then on Safari i can at least see its a date input field and the user can add a date manually.
Code:
<input placeholder="Date" id="datetimepicker" type="date" name="calender" class="form-control" />
CSS:
input#datetimepicker {
min-height: 1px;
}
This is just a quick hack that worked for me as for the browsers that doesnt support type="date" .
Continuing adopting my code to work with IE...
I have a hidden div containing a form to edit some information. When the user selects the item to edit, this div is shown and the fields are populated with the information for the item. That divs (in simplified terms) looks like this:
<div id="editform">
<form action="" method="post" id="qform" name="qform">
First param: <input name="field1" id="field1"/> <br/>
Second param: <input name="field2" id="field2"/> <br/>
...
<input type="hidden" name="qid" id="qid" value=""/>
<img id="submit" src="..." alt="..." title="..." />
</form>
I use jquery to set the values into the fields. My function for opening up the editing div looks something like this:
function edit_item(item_id) {
item = get_item(item_id); //this will return a JS object
$('#field1').val(item.property1);
$('#field2').val(item.property2);
...
$('#qid').val(item_id);
$('#submit').click(function() {
alert($('#qid').val());
$('#qform').ajaxSubmit();
});
}
All of this works fine in FF, Opera, Webkit and IE 9, however in IE7 and IE8, I'm having a strange problem. I can see the item_id being set correctly in the edit_item function, however as soon as that function completes, the hidden input value (qid) gets reset to the empty string. When the form is being ajax-submitted, the alert shows the value to be an empty string despite it being set correctly. Interestingly, all other fields are fine. And it works correctly in IE 9.
What am I missing here? Many thanks in advance.
This is totally stupid, and it shouldn't be the case, however:
$('#field1').val(item.property1);
did not work. Yet
$('#field1').attr("value", item.property1);
worked fine. I'm leaving it at that.
Solution for IE without JQuery in pure JavaScript does not look too complicated:
document.getElementById(id).setAttribute('value', value);
In addition to Aleks G's answer, I found out that value attribute must not be defined implicitly in the hidden element in order to jQuery .setAttr() and .val() work without issue in IE8.
See here for more details:
jQuery .val() setter not working?
I know i am late but i used following workaround since it did not work for me after trying all solutions
var id=$(this).data('id');
$('#update_entery_div').append(
"<input type='hidden' name='id' value="+id+" >"
);
I have an file upload box and a clear button on my page. When I press the clear button, I want the text in the file upload box to be cleared.
The following works in Firefox, but doesn't in IE (the text stays there). Is there a workaround for this?
$("#clear").click( function() {
$("#attachment").val("");
//document.myform.attachment.value = "";
})
HTML:
<form name="myform">
<input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>
jsFiddle
One solution I've found is simply doing:
document.getElementById('myUploadField').parentNode.innerHTML = document.getElementById('myUploadField').parentNode.innerHTML;
Seems like it shouldn't work, but it does.
This solution is more elegant than cloning the input element. You wrap a <form> around the element, call reset on the form, then remove the form using unwrap(). Unlike the clone() solutions above, you end up with the same element at the end (including custom properties that were set on it).
Tested and working in Opera, Firefox, Safari, Chrome and IE6+. Also works on other types of form elements, with the exception of type="hidden".
http://jsfiddle.net/rPaZQ/
function reset(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
It's readonly in IE8 onwards, so you can't clear it. The simplest way around this security feature is to replace the element with a copy.
Edit Found a previous answer to this that suggests the same approach! Clearing <input type='file' /> using jQuery
This worked for me:
$("input[type='file']").replaceWith($("input[type='file']").clone(true));
use simple javascript:
formname.reset();
See the Demo: http://jsfiddle.net/rathoreahsan/YEeGR/
Try to use the below method to clear the input file.
Include this script:
<script>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}
</script>
Change HTML to this:
<div id="uploadFile_div">
<input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>`
Use the old-fashioned <input type="reset" value="clear this">
The following code works great in IE, but not in FF or Safari. I can't for the life of me work out why. The code is supposed to disable radio buttons if you select the "Disable 2 radio buttons" option. It should enable the radio buttons if you select the "Enable both radio buttons" option. These both work...
However, if you don't use your mouse to move between the 2 options ("Enable..." and "Disable...") then the radio buttons do not appear to be disabled or enabled correctly, until you click anywhere else on the page (not on the radio buttons themselves).
If anyone has time/is curious/feeling helpful, please paste the code below into an html page and load it up in a browser. It works great in IE, but the problem manifests itself in FF (3 in my case) and Safari, all on Windows XP.
function SetLocationOptions() {
var frmTemp = document.frm;
var selTemp = frmTemp.user;
if (selTemp.selectedIndex >= 0) {
var myOpt = selTemp.options[selTemp.selectedIndex];
if (myOpt.attributes[0].nodeValue == '1') {
frmTemp.transfer_to[0].disabled = true;
frmTemp.transfer_to[1].disabled = true;
frmTemp.transfer_to[2].checked = true;
} else {
frmTemp.transfer_to[0].disabled = false;
frmTemp.transfer_to[1].disabled = false;
}
}
}
<form name="frm" action="coopfunds_transfer_request.asp" method="post">
<select name="user" onchange="javascript: SetLocationOptions()">
<option value="" />Choose One
<option value="58" user_is_tsm="0" />Enable both radio buttons
<option value="157" user_is_tsm="1" />Disable 2 radio buttons
</select>
<br /><br />
<input type="radio" name="transfer_to" value="fund_amount1" />Premium
<input type="radio" name="transfer_to" value="fund_amount2" />Other
<input type="radio" name="transfer_to" value="both" CHECKED />Both
<br /><br />
<input type="button" class="buttonStyle" value="Submit Request" />
</form>
To get FF to mimic IE's behavior when using the keyboard, you can use the keyup event on the select box. In your example (I am not a fan of attaching event handlers this way, but that's another topic), it would be like this:
<select name="user" id="selUser" onchange="javascript:SetLocationOptions()" onkeyup="javascript:SetLocationOptions()">
Well, IE has a somewhat non-standard object model; what you're doing shouldn't work but you're getting away with it because IE is being nice to you. In Firefox and Safari, document.frm in your code evaluates to undefined.
You need to be using id values on your form elements and use document.getElementById('whatever') to return a reference to them instead of referring to non-existent properties of the document object.
So this works a bit better and may do what you're after:
Line 27: <form name="frm" id="f" ...
Line 6: var frmTemp = document.getElementById('f');
But you might want to check out this excellent book if you want to learn more about the right way of going about things: DOM Scripting by Jeremy Keith
Also while we're on the subject, Bulletproof Ajax by the same author is also deserving of a place on your bookshelf as is JavaScript: The Good Parts by Doug Crockford
Why not grab one of the AJAX scripting libraries, they abstract away a lot of the cross browser DOM scripting black magic and make life a hell of a lot easier.