Placeholder not working in IE 11 when set using Jquery - javascript

I have a requirement where I have 6 read only html textbox and I need to set the placeholder dynamically using JQuery . The method I have used works fine in Chrome but doesn't work on IE 11.
$(".textBox").attr("placeholder", "Please Select Items");
Above should be the default placeholder and upon selection of multiple select elements the count should be updated which I have written as below
$('.textBox').attr('placeholder',TempArray.length + " Items selected");
I have searched for the similar questions but does not seem to the relevant to my problem. Is there any alternative method in JQuery which can resolve the issue. Thanks in advance

I tried below code in IE 11. Its works fine.
<input type="text" id="add_placeholder" placeholder="please select" readonly></input>
<button id="click">Click me</button>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script>
$('#click').click(function(){
$('#add_placeholder').attr('placeholder','name is inserted');
});
</script>
https://jsfiddle.net/ev4rg8ed/

Related

Google Chrome Version 76.0.3809.100 (Official Build) (64-bit) Autocomplete Behaviour

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.

Datepicker not working in safari and FireFox

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" .

jquery setting hidden input value not working as expected in IE7 and IE8

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+" >"
);

Clearing file input box in Internet Explorer

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">

Disabling inputs with jQuery not working

I am trying to disable some input fields using jQuery 1.4.2. This is a part of the HTML code:
<input type="text" disabled="disabled" name="nume" value="Text" />
This is the Javascript:
$('.salveaza').live('click', function(e){
$.get(ajaxURL, $('form', itemCurent).serialize()+'&id='+itemCurent.data('id')+'&optiune=editeaza-categorie');
// This is the code for disabeling inputs
$('input', itemCurent).attr('disabled', 'disabled');
itemCurent.removeClass('curent');
$('.optiuniEditeaza', itemCurent).remove();
e.preventDefault();
});
The above code doesn't work. Note that the inputs are added with jQuery, that's why I am using live, I tried all sorts of stuff.
I also tried firebug console to disable all input fields on the page and it's not working:
$('input').attr('disabled', 'disabled');
Any help will be apreciated,
Thanks
This should do the trick:
Disable: $('#the-field-id').attr('disabled', true);
Enable: $('#the-field-id').removeAttr('disabled');
Use true instead of disabled:
$("input").attr("disabled", true);
Working example:
http://jsfiddle.net/bEC8L/ (input is set to disable after 5 seconds)
jQuery sets properties instead of attributes if the given attribute is actually a property name, and "disabled" isn't a valid value for the disabled property.
Your piece of code seems ok, so the problem must be coming from another part of code. Put a break on the line where you disable and then run step by step.
Try this code. Onclick of button the textbox will be disabled.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fname").attr("disabled",false);
$("#idDisable").click(function(){
$("#fname").attr("disabled",true);
});
});
</script>
<input type="button" id="idDisable" value="click to disable" name="Click"/>
<input type="text" id="fname" />

Categories