Formulaire HTML “espace réservé” ne fonctionne pas dans IE 8

Salut j'ai créé un formulaire sur mon site. Je suis à l'aide de placeholder="Full Name" mais rien ne s'affiche dans le formulaire lors de l'affichage dans IE8 (et probablement d'autres versions IE)

J'ai essayé d'utiliser value="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}" mais la forme est toujours vide. Pour une raison quelconque 'Nom Complet' s'affiche lorsque vous cliquez sur le formulaire, puis s'éteint.

Le site que je suis en train de travailler sur est [usspcatalystcentre.org.royaume-uni][1], et vous pouvez voir ce que je veux dire. Les deux premières formes (Titre & Nom Complet) est l'endroit où j'ai essayé d'utiliser

value="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}"

Le reste du formulaire sont où j'ai juste utilisé placeholder

Voici le code, je suis en train de travailler sur

<form action="contact.php" method="post">


                <input id=title name=title type=text value="" onfocus="if(this.value=='Username') this.value='';" onblur="if(this.value=='') this.value='Username';" required class="top-formfields" value='<?php print $_SESSION['title']?>'>  <br /><br />
                <input id=fullname name=fullname type=text value="" onfocus="if(this.value=='Full Name') this.value='';" onblur="if(this.value=='') this.value='Full Name';" required  class="top-formfields" value='<?php print $_SESSION['fullname']?>'> <br /><br />
                <input id=companyname name=companyname type=text placeholder="Company Name" required  class="top-formfields" value='<?php print $_SESSION['companyname']?>'>    <br /><br />
                <input id=companynumber name=companynumber type=text placeholder="Company Registered Number" required  class="top-formfields" value='<?php print $_SESSION['companynumber']?>'> <br /><br />
                <textarea id=address name=address rows=5 placeholder="Address" required class="top-textarea"><?php print $_SESSION['address']?></textarea> <br /><br />
                <input id=postcode name=postcode type=text placeholder="Post Code" required  class="top-formfields" value='<?php print $_SESSION['postcode']?>'>    <br /><br />
                <input id=phonenumber name=phonenumber type=text placeholder="Phone Number" required  class="top-formfields" value='<?php print $_SESSION['phonenumber']?>'>    <br /><br />
                <input id=email name=email type=text placeholder="Email" required  class="top-formfields" value='<?php print $_SESSION['email']?>'> <br /><br />
                <input id=mobile name=mobile type=text placeholder="Mobile" required  class="top-formfields" value='<?php print $_SESSION['mobile']?>'> <br /><br />
                <input id=website name=website type=text placeholder="Website URL" required  class="top-formfields" value='<?php print $_SESSION['website']?>'> <br /><br />

Merci d'avance, Tom

espace réservé à l'attribut n'est pas pris en charge par toutes les versions de IE.

OriginalL'auteur Tom | 2012-07-02

6

La placeholder attribut est une nouvelle HTML5 amélioration. Il n'est pas pris en charge dans les vieux IE-s -
http://diveintohtml5.info/forms.html

Pour imiter la croix-navigateur, vous pourriez vouloir utiliser jQuery - exemple

jQuery est d'un usage général, côté client bibliothèque JS, il ne vient pas avec un polyfill pour placeholder.
assurez-vous.. c'est pourquoi j'ai dit imitent - il peut vous donner la sensation, pas le soutien

OriginalL'auteur Zoltan Toth

IE 9 ne prennent pas en charge titulaire de place donc la première solution qui viennent dans mon esprit, c'est cela.

bonne chance!

<script type="text/javascript"> 
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>

OriginalL'auteur Aamir Shahzad

Tom, espace réservé n'est pas un attribut pris en charge par IE8.

Je pense que cela vous aidera dans la direction où vous allez:

De pré-remplir le champ avec "Nom Complet". Lui donner de la valeur="Nom Complet" à l'avance en tant que par défaut.

onfocus= "if (this.value=='Full Name'){this.select();this.value='';this.style.color='#999999';}else{this.style.color='#000000';}"  
onclick= "if (this.value=='Full Name'){this.select();this.value='';this.style.color='#999999';}else{this.style.color='#000000';}" 
onblur=  "if (this.value==''||this.value=='Full Name'){this.value='Full Name';this.style.color='#999999';}else{this.style.color='#000000';}" 
onkeyup= "if (this.value=='Full Name'){this.select();this.style.color='#999999';}else{this.style.color='#000000';}" 
onchange="if (this.value=='Full Name'){this.style.color='#999999';}else{this.style.color='#000000';}"

OriginalL'auteur Rick Paul

if (!('placeholder' in $('<input>')[0])) { //Create a dummy element for feature detection
$('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add); //Select the elements that have a placeholder attribute
$('form').submit(function(){$(this).find('input[placeholder], textarea[placeholder]').each(remove);}); //Remove the placeholder text before the form is submitted
}

S'il vous plaît ajouter quelques explications pour votre réponse aussi!

OriginalL'auteur Santos L. Victor

Enregistrer le code suivant dans .js et assurez-vous de changer le type d'entrée

$(document).ready(function () {
if ($.browser.msie) { //this is for only ie condition ( microsoft internet explore )
$('input[type="text"][placeholder], textarea[placeholder]').each(function () {
var obj = $(this);
if (obj.attr('placeholder') != '') {
obj.addClass('IePlaceHolder');
if ($.trim(obj.val()) == '' && obj.attr('type') != 'password') {
obj.val(obj.attr('placeholder'));
}
}
});
$('.IePlaceHolder').focus(function () {
var obj = $(this);
if (obj.val() == obj.attr('placeholder')) {
obj.val('');
}
});
$('.IePlaceHolder').blur(function () {
var obj = $(this);
if ($.trim(obj.val()) == '') {
obj.val(obj.attr('placeholder'));
}
});
}
});

http://jsfiddle.net/wbcTm/79/

OriginalL'auteur Charix

0

Assurez-vous d'ajouter la détection du navigateur si vous utilisez jQuery 1.9+. Vous pouvez l'installer à partir de votre terminal avec la commande npm install jquery.navigateur

OriginalL'auteur Michel Arteta

Vous devez vous connecter pour publier un commentaire.