1

diveintohtml5 indique que vous pouvez commencer à utiliser le type de formulaire e-mail. Donc, je l'essaie sur l'une de mes formes. J'utilise jQuery et un plugin appelé jquery-watermark. Il fait fonctionner l'élément d'espace réservé dans les navigateurs. Le plugin fonctionne toujours sur Firefox 3.6 mais sur Opera 10.61 et Chrome 6, l'espace réservé n'est pas rendu.Le plugin jquery-watermark et le type d'entrée e-mail HTML5 ne fonctionnent pas correctement

<script type="text/javascript"> 
    $('form input#comment_email').watermark('email (optional)'); 
</script> 

est utilisé pour afficher le filigrane/l'espace réservé.

Rails 3 sorties: ce

<input id="comment_email" name="comment[email]" size="30" type="email" /> 

Je ne sais pas pourquoi cela ne fonctionne pas. Des idées ce qui se passe ici?

Répondre

2

Il semble que le plugin jquery-watermark sélectionne uniquement certains types d'entrée à filigrane. Tout ce que vous devriez avoir à faire est de tordre cette ligne dans jquery.watermark.js:

selWatermarkAble = ":text,:password,:search,textarea", 

pour inclure le nouveau type de courrier électronique:

selWatermarkAble = ":text,:password,:search,:email,textarea", 
+0

Lorsque je l'ai mis à 'selWatermarkAble =": texte,: mot de passe,: recherche, : email, textarea ",' Opera arrête de rendre tous les filigranes. Si j'utilise 'selWatermarkAble =": texte,: mot de passe,: recherche, email, textarea ",' les filigranes fonctionnent de nouveau dans Opera en excluant le champ email qui défait le point car Opera est le seul navigateur de bureau qui valide réellement les adresses email. Les autres navigateurs rendent cependant le filigrane de l'email. Quand j'utilise 'selWatermarkAble =": text,: mot de passe,: search,: email, textarea ",' tous les navigateurs fonctionnent à l'exception d'Opera qui ne rend pas de filigranes ... qu'est-ce qui se passe ici? – BasicObject

+0

m'a accidentellement répété là ... – BasicObject

+1

Je suppose qu'il doit être entré [type = email], pas: email. –

2

Vouliez-vous dire les textes d'espace réservé dans les entrées?
Il existe une autre solution: les espaces réservés HTML 5 et Watermark constituent une bonne solution de repli pour les navigateurs qui ne prennent pas en charge les espaces réservés.

$('input[placeholder]').each(function() { 
    $(this).watermark($(this).attr('placeholder')); 
}) 

(note: Je n'ai pas testé ce code)

(EDIT: Voir aussi http://diveintohtml5.ep.io/detect.html#input-placeholder)

+0

J'utilise les entrées les espaces réservés et filigrane est mon fallback. – BasicObject

+0

Vous pourriez aussi, compte tenu de l'implémentation de watermark(), passer temporairement le type à "text", puis revenir à nouveau. –

Questions connexes