Implémentation de l'attribut d'espace réservé HTML5 (compatible IE) code_jquery

HTML5 a apporté de nombreuses améliorations au formulaire Web, telles que de nouveaux types de types d'entrée, la validation de formulaire, etc.

L'espace réservé est un autre attribut nouvellement ajouté à HTML5. Lorsque cet attribut est défini dans la zone de saisie ou de texte, le contenu de la valeur sera affiché dans la zone de texte sous la forme d'une invite de texte grise. Lorsque la zone de texte prend le focus, le texte de l'invite. disparaît. Dans le passé, cet effet ne pouvait être obtenu qu'en utilisant JavaScript. Firefox, Google Chrome, etc. ont exprimé leur soutien, mais IE était le seul à sembler incohérent !

Par exemple :

Présentation d'un puissant plug-in d'attribut qui permet à IE de prendre en charge l'espace réservé. Il est également compatible avec d'autres navigateurs qui ne prennent pas en charge l'espace réservé. Le code est le suivant :

.

$(document).ready(function(){ 
 var doc=document,
 inputs=doc.getElementsByTagName('input'),
 supportPlaceholder='placeholder'in doc.createElement('input'),
 
 placeholder=function(input){
  var text=input.getAttribute('placeholder'),
  defaultValue=input.defaultValue;
  if(defaultValue==''){
  input.value=text
  }
  input.onfocus=function(){
  if(input.value===text)
  {
   this.value=''
  }
  };
  input.onblur=function(){
  if(input.value===''){
   this.value=text
  }
  }
 };
 
 if(!supportPlaceholder){
  for(var i=0,len=inputs.length;i<len;i++){
   var input=inputs[i],
   text=input.getAttribute('placeholder');
   if(input.type==='text'&&text){
    placeholder(input)
   }
  }
 }
 });

Copiez simplement le code et enregistrez-le en tant que fichier js pour référence. Pas besoin de faire de traitement, super pratique !

ex : Cela fait que l'entrée d'IE affiche l'attribut d'espace réservé, mais s'il n'y a qu'une seule entrée sur la page, tout va bien. S'il y a plusieurs entrées, si l'entrée ne remplit aucune valeur, alors son entrée est vide. remplira automatiquement la valeur de l'espace réservé dans value, provoquant une erreur :

.

<input type="text" placeholder="输入商品编码" name="goodscode" id="goodscode" value="123" />
<input type="text" placeholder="输入商品名称" name="goodsname" id="goodsname" value="输入商品名称" />

La solution est de faire votre propre jugement en arrière-plan. Peut-être que cela peut être résolu dans le fichier js ci-dessus et nous l'étudierons plus tard~!