"input type=date" placeholder sur iOS?
je suis en train de développer un site web destiné aux iPhones/ iPads.
définir le type d'entrée à date change l'apparence du champ en un menu déroulant, et l'attribut placeholder qui fonctionne avec les champs de texte n'apparaît que sur la version de bureau, pas sur l'iphone. Est-il un moyen de contourner cela?
c'est à ça que ça ressemble actuellement; http://i44.tinypic.com/2u91xsz.png
je veux m'en débarrasser date de fermeture texte et avoir quelque chose de similaire au menu déroulant au-dessus de lui.
son essentiellement juste pour que je puisse laisser l'utilisateur sait ce qu'ils entrent sans la nécessité d'utiliser un espace supplémentaire sur l'écran, de sorte que ce n'est pas le plus grand problème s'il n'y a pas de solution.
3 réponses
m'a pris un certain temps à comprendre celui-ci, le laisser comme type=" texte", et ajouter onfocus= " (ceci.type= 'date') "
j'aime bien le onblur j'ai vu mentionné
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">
l'attribut placeholder qui fonctionne avec les champs de texte ne s'affiche que sur la version de bureau, pas sur l'iphone. Est-il un moyen de contourner cela?
essayez javascript et css.
<div id="closing_date">
<label for="closing_date_field" class="overlabel">Closing Date</label>
<input id="closing_date_field" type="date" name="closing_date">
</div>
voir le code ici
Je l'ai fait fonctionner avec certains": avant " pseudo-classe et un petit peu de javascript. Vous devrez avoir une classe ou l'id de votre entrée. Voici un échantillon avec un id de "myInput "
#myInput:before{ content:"Date of birth"; width:100%; color:#AAA; }
#myInput:focus:before,
#myInput.not_empty:before{ content:none }
puis dans javascript, ajouter la classe" not_empty " en fonction de la valeur dans les événements onChange et onKeyUp.
vous pouvez même ajouter tout cela dynamiquement sur tous les champs de date.
voici un code approximatif pour faire ceci :
$('input[type=date]').each(function(){
var input=$(this);
var id=input.attr('id');
if (!id){
id='RandomGeneratedId_'+Math.random().toString(36).substring(7);
input.attr('id',id);
}
var placeholder=input.attr('placeholder');
if (placeholder){
$('head').append('<style> #'+id+':before{ content:"'+placeholder+'"; width:100%; color:#AAA; } #'+id+':focus:before,#'+id+'.not_empty:before{ content:none }</style>');
}
input.on('change keyup',function(){
if ($(this).val()){
$(this).addClass('not_empty')
}else{
$(this).removeClass('not_empty')
}
return false;
});
});
il n'est pas parfait, mais il fonctionne bien dans Chrome et iOS7 webviews