Comment faire pour modifier la valeur d'entrée onfocus et onblur (pas de jquery)
J'ai écrit un code, un peu comme une alternative pour HTML5 espace réservé à l'aide de JavaScript, mais cela ne fonctionne pas. Aussi loin que je peux comprendre (avec mes médiocres connaissances en js), tout devrait fonctionner, mais il ne l'est pas. S'il vous plaît aider!!! Voici mon code:
JavaScript:
(function(){
var field = document.getElementById('placeholder');
var placeholdertext = "Search box"; //<< change this to whatever you want the placeholder text to be
field.setAttribute("onblur", "if(value=='') { value = '" + placeholdertext + "'")
field.setAttribute("onfocus", "if(value=='" + placeholdertext + "') { value = '' }")
})();
HTML
<input type="search" value="Search box" id="placeholder">
Edit:
Je ne veux pas utiliser jQuery ou inline html de codage, s'il vous plaît. Merci pour toute aide, les gars!!!
- Pensez à utiliser le HTML5
placeholder
l'attribut au lieu kind of like an alternative for HTML5 placeholder using JavaScript
- Envisager l'utilisation d'un existant
placeholder
polyfill à la place. Vous n'avez pas considérés comme des choses comme la valeur de l'espace réservé est soumise avec le formulaire si l'utilisateur n'a pas saisi une valeur.
Vous devez vous connecter pour publier un commentaire.
Remplacer
value
avecthis.value
dans votre code (que vous avez besoin pour vérifier la valeur de l'élément qui déclenche un événement, et non pas une variable globale) et il va travailler.Au passage, peut-être que je préfère encore à l'aide de
placeholder
attribut ici, fournissant un JS cale uniquement pour les navigateurs qui ne supportent pas. Cela permettrait de simplifier le code javascript de la partie aussi, comme vous n'auriez pas à utiliser certains variable pour stocker des DOM-données associées:... et en fait je préfère le à l'aide de
addEventListener/attachEvent
ici au lieu deonblur/onfocus
, comme décrit dans cette réponse.Uncaught TypeError: Cannot call 'setAttribute' of null.
#placeholder
élément est dans les DOM - et qui, à son tour, signifie que le script réside probablement dans<head>
section (et ne pas avoirdefer
attribut). Soit faire le travailonLoad/onDOMReady
(dans le violon c'est exactement ça), ou de le déplacer à la fin de<body>
, ou de l'utilisation<defer>
(mordre la Opéra de balle)Sans jQuery:
this.value
au lieu defield.value
ici.Essayez sans Jquery
Je n'ai pas testé, mais si je comprends votre question, cela devrait fonctionner. Si cela fonctionne, n'oubliez pas de cliquer sur la case à cocher.
bind()
est ce que vous voulez l'utiliser icival()
n'est pas une méthode d'éléments du DOM