Guys I know this question has been asked here many time but still I wasn't able to find a solution to my problem. I have a textarea in my asp.net mvc application which has a placeholder in it.
<textarea placeholder="Write Query..." maxlength="1000"></textarea>
Now Internet Explorer 8 & 9 doesn't support the placeholder property so I need some workaround for it, I have search here and google and found various javascripts but unfortunately none of those worked. Although some worked (as the showed the placeholder text) but the text didn't disappear on writing in the textArea
Two of those scripts (that worked half right) are these :
$(function () {
if (!$.support.placeholder) {
var active = document.activeElement;
$('input[type="text"], textarea').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$('input[type="text"], textarea').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function () { $(this).val(''); });
});
}
});
Second :
$(function () {
if ($.browser.msie && $.browser.version <= 9) {
$("[placeholder]").focus(function () {
if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
}).blur(function () {
if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
}).blur();
$("[placeholder]").parents("form").submit(function () {
$(this).find('[placeholder]').each(function () {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
})
});
}
});
try to this alternative
https://github.com/parndt/jquery-html5-placeholder-shim/
i think it's can manage by meta tag
Related
I want to show a label when select element is clicked on (change opacity and location by a few px)
Here's how I do it with a normal form input. THIS WORKS.
$(".lead_field-label.is-focus").removeClass("is-focus");
$(".lead_text-field").on("focusin", function () {
$(this).siblings(".lead_field-label").addClass("is-focus");
});
$(".lead_text-field").on("focusout", function () {
if ($(this).val() === "") {
$(this).siblings(".lead_field-label").removeClass("is-focus");
}
if ($(this).val() !== "") {
$(this).siblings(".lead_field-label").addClass("is-focus");
}
});
This is for a select input, and this doesn't work:
$(".lead_field-label-select.is-focus-select").removeClass("is-focus-select");
$("select").focus(function() {
$(this).siblings(".lead_field-label-select").addClass("is-focus-select");
});
$("select").on("focusout", function () {
if ($(this).val() === "") {
$(this).siblings(".lead_field-label-select").removeClass("is-focus-select");
}
if ($(this).val() !== "") {
$(this).siblings(".lead_field-label-select").addClass("is-focus-select");
}
});
I tried to target a class (.select), an ID, and a ton of other stuff too. Nothing seems to work. Any solutions?
I'm trying to figure out why this function does not work when written a certain way but works if I break up the function.
I initially hide sections of a form, and then want to show or hide based on a radio check. These are two different forms on separate pages so I'm wondering if that has something to do with it now working written the first way?
jQuery:
$formMailSelected.hide();
$formEmailSelected.hide();
$formPhoneSelected.hide();
$formEmailSelectedRepresentative.hide();
When written like this it does not work:
$('input:radio[name="howToContact"]').change(function () {
if (this.checked) {
if (this.value === 'Phone' || 'Mail') {
$formPhoneSelected.fadeIn(750);
$formEmailSelectedRepresentative.hide();
$formMailSelected.fadeIn(750);
$formEmailSelected.hide();
} else if (this.value === 'Email') {
$formEmailSelectedRepresentative.fadeIn(750);
$formPhoneSelected.hide();
$formMailSelected.hide();
$formEmailSelected.fadeIn(750);
}
}
});
Broken up and written like this, it DOES work as I would like:
$('input:radio[name="howToContact"]').change(function () {
if (this.checked) {
if (this.value === 'Mail') {
$formMailSelected.fadeIn(750);
$formEmailSelected.hide();
} else if (this.value === 'Email') {
$formMailSelected.hide();
$formEmailSelected.fadeIn(750);
}
}
});
$('input:radio[name="howToContact"]').change(function () {
if (this.checked) {
if (this.value === 'Phone') {
$formPhoneSelected.fadeIn(750);
$formEmailSelectedRepresentative.hide();
} else if (this.value === 'Email') {
$formPhoneSelected.hide();
$formEmailSelectedRepresentative.fadeIn(750);
}
}
});
I am trying to use one of the IE9 IE8 placeholder solutions, but i have an error showing in IE9 test setup with the code. The solution i am using is clearly working for many people according to the comments and updates in github, but I have a fundamental problem getting the code recognised.
I have this line in my page header, which should allow me to use jquery. Indeed i am running other jquery functions and they seem to be working:
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Also in the head i have this (again all the other functions in my myjs.js are showing in developer tools and are available as required):
<!-- my java code link -->
<script src="/js/myjs.js"></script>
The function that i am using for the placeholder solution is this one:
placeholderSupport = ("placeholder" in document.createElement("input"));
if (!placeholderSupport) {
//This browser does not support the placeholder attribute
//use javascript instead
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() === '' || input.val() === input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('');
}
})
});
}
The error that i am getting from IE9 developer tools is this:
Invalid App Id: Must be a number or numeric string representing the application id.
The error is showing on the line of code that looks like this, specifically the dollar sign:
$('[placeholder]').focus(function() {
From my reading I thought that the $ start was a function of the jquery library, which i beleive to be present and working, but i am obviously missing a trick. Can anybody help please. Thanks for any guidance.
Try this code, It works IE8+
UPDATED: to match all inputs and textarea
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function () {
jQuery.support.placeholder = false;
test = document.createElement('input');
if ('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function () {
if (!$.support.placeholder) {
var active = document.activeElement;
$('input,textarea').focus(function () {
if ($(this).attr('placeholder') !== '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('has-placeholder');
}
}).blur(function () {
if ($(this).attr('placeholder') !== '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('has-placeholder');
}
});
$('input,textarea').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$('input.has-placeholder,textarea.has-placeholder').val('');
});
}
});
Plus CSS
.has-placeholder {
color:#777 /*whatever you like*/
}
Here is the final code using Dippas' answer with the extras to cover textareas and inputs that have type='tel' rather than type='text'. This seems to cover everything on my form, but there might be other input types that need adding at other times. I'm sure that somebody who knows what they are doing can trim this down by sorting out some of the duplicate code.
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if ('placeholder' in test) jQuery.support.placeholder = true;});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if (!$.support.placeholder) {
var active = document.activeElement;
$('textarea').focus(function() {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('has-placeholder');
}
}).blur(function() {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('has-placeholder');
}
});
$('textarea').blur();
$(active).focus();
$('form:eq(0)').submit(function() {
$('textarea.has-placeholder').val('');
});
$('input').focus(function() {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('has-placeholder');
}
}).blur(function() {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('has-placeholder');
}
});
$('input').blur();
$(active).focus();
$('form:eq(0)').submit(function() {
$('input.has-placeholder').val('');
});
}
});
Is there any way to have something similar to emptyText in input fields as in ExtJS?
I tried setting values with changed CSS. But, the value is submitted with the form and it is not disappearing as soon as I click the input field. I need to support IE7 and above
Any help would be appreciated.
What you are looking for is placeholder..W3School
<input type="text" placeholder="Hii" />
You can find polyfills for ie and old versions of other browser who don't support placeholder..
You can add this code for browser who dont support placeholder to make it work same way it works in good browsers..*It needs JQuery
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).attr('placeholder') != undefined && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && $(this).attr('placeholder') != undefined && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
Rajat answer is correct, but only for HTML5.
You can look at this question if you want an answer that work on IE (and other browsers) using only pure javascript without any library.
My application is in need of placeholders for a text field and a textarea field. I know Internet Explorer doesn't support placeholders. I was looking around and I found some fallback code which is working great only for the text field. How can I get this working for the textarea also.
Code:
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$('input[type=text], textarea').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$('input[type="text"], textarea').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
HTML:
<li>
<input type="text" placeholder="To:" id="to" autocapitalize="off" autocorrect="off" autocomplete="off" />
</li>
<li>
<textarea placeholder="Message:" id="body" rows="10" cols="30" autocapitalize="off" autocorrect="off" autocomplete="off"></textarea>
</li>
Change $(':text') to $('input[type="text"], textarea')
Alternatively, this existing jQuery plugin:
https://github.com/mathiasbynens/jquery-placeholder
works on textareas and many types of input fields, including password fields
<script type="text/javascript">
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$('input[type="text"], textarea').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$('input[type="text"], textarea').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
</script>
It is using a text selector, change it to also use textarea.
$(':text')
should be
$(':text, textarea')
or for better performance use
$('input[type=text], textarea')
It looks like you would need to replace :text with :text,textarea.