Maison >interface Web >js tutoriel >jQuery implémente la zone de saisie IE pour compléter le partage de code de balise d'espace réservé

jQuery implémente la zone de saisie IE pour compléter le partage de code de balise d'espace réservé

小云云original: 2018-02-05 13:07:461146parcourir

Cet article présente principalement comment jQuery implémente la fonction de balise d'espace réservé de la zone de saisie IE, impliquant la réponse aux événements jQuery et le fonctionnement dynamique des attributs des éléments de page. J'espère que cela pourra aider tout le monde.

Si vous ajoutez l'attribut placeholder="xx" à la zone de saisie, par exemple :

<input type="text" placeholder="请输入关键词"/>

vous pouvez naviguer sur Google Vous pouvez implémenter la fonction de remplacement de texte dans la zone de saisie des navigateurs avancés tels que le navigateur, c'est-à-dire que vous obtiendrez la boîte de dialogue comme indiqué ci-dessous :

Mais cet attribut n'est pas disponible dans le navigateur par défaut de WIN7. Il n'est pas compatible avec IE8, encore moins IE6. En d’autres termes, la balise placeholder n’est pas prise en charge dans IE.

Si vous n'y croyez pas, vous pouvez extraire ce code, l'exécuter dans IE8 et l'essayer. Vous obtenez simplement une boîte de dialogue vide

Pour y parvenir dans IE, vous devez. utiliser des composants pour perdre le flou de focus et obtenir le focus. Pour plus de détails, veuillez vous référer à "Méthode de transmission de valeur entre le focus du composant JavaScript et le point d'ancrage dans la page"

En fait, vous pouvez vous passer de jQuery. Ceci est utilisé ici pour examiner "les contrôles jQuery via l'implémentation du nœud ne termine le transfert des paramètres que via la méthode get au premier plan》

L'idée est très simple. Au début, cette zone de texte est par défaut # Police grise cccccc et la valeur est "Veuillez entrer le mot-clé". Lorsqu'il obtient le focus, mettez-le. La couleur est définie sur #000000 noir et la valeur est vide. Une fois le focus perdu, si la valeur est vide, elle le sera. restauré à la police grise #cccccc par défaut La valeur est "Veuillez saisir des mots-clés"

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索输入框替换文本</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
<form id="test">
  <input id="searchKeyword" type="text" maxlength="30" value="请输入关键词" style="color:#cccccc" />
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  var isthisnull = true ;
  $("#searchKeyword").focus(function(){
    if ($(this).val() == "请输入关键词" && isthisnull) {
      $(this).val("");
      $(this).attr("style","color:#000000");
      isthisnull = false;
    }
  });
  $("#searchKeyword").blur(function(){
    if ($(this).val() == "") {
      $(this).val("请输入关键词");
      $(this).attr("style","color:#cccccc");
      isthisnull = true;
    }
  });
});
</script>

Notez ici que. une valeur booléenne de isthisnull est ajoutée pour déterminer si elle est vide, afin de déterminer si l'utilisateur souhaite saisir "Veuillez saisir un mot-clé",

Vous ne pouvez pas penser que s'il y a "Veuillez saisir des mots-clés" dans la zone de texte, elle est vide. Que se passe-t-il si l'utilisateur saisit lui-même « Veuillez saisir des mots-clés » ?

Vous ne devez pas utiliser jquery ou javascript ici pour déterminer si la valeur de la couleur ou du style est "#cccccc" ou "color:#cccccc", car utiliser $(this).css("color") pour obtenir la couleur ne fonctionne pas dans le navigateur Les résultats de sortie sont différents. Si vous choisissez le style, IE pensera qu'il s'agit d'un objet au lieu d'une chaîne

Définissez un isthisnull, et vous pourrez également vous préparer à une vérification ultérieure du formulaire

Enfin. , l'effet suivant est obtenu dans IE :

Recommandations associées :

Explication détaillée de la façon d'utiliser l'espace réservé React Native

Exemple de code d'espace réservé encapsulé JQuery

Détails de l'attribut HTML5 Placeholder

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'autorisation d'applet WeChat pour obtenir les détails de l'utilisateurArticle suivant：Exemple d'autorisation d'applet WeChat pour obtenir les détails de l'utilisateur

Articles Liés

Voir plus