jQuery Girl
  1. jQuery Girl
  3. .preventDefault () ne fonctionne pas sur. (‘input’, function {})
Intereting Posts
removeClass et animation en fondu Comment étendre le moteur de sélecteur de jQuery pour m’avertir lorsqu’un sélecteur n’est pas trouvé? Jquery / javascript datetime Comment afficher le pourcentage avec le commutateur Kendo avec jQuery? La saisie semi-automatique de l’interface utilisateur jQuery est déclenchée dans Internet Explorer avec un atsortingbut de substitution HTML 5 Sélecteur JQuery Datetime – Nécessité de choisir le mois et l’année uniquement Comment puis-je passer des arguments dans la fonction .click ()? jsTree – optimisation du rendu | très long rendu avec 2000 nœuds Comment mesurer le temps de chargement d’une requête AJAX et afficher un panneau de chargement? Les fadeIn et fadeOut de jQuery peuvent-ils être utilisés pour utiliser des transitions CSS? La validation des champs avec le même nom et la même classe obtient “TypeError: e.validator.methods n’est pas défini” L’ID doit-il être unique sur toute la page? jquery ujs ne fonctionne pas lorsque je charge à distance des partiels / contenus avec des appels distants ou jQuery Comment extraire l’atsortingbut href d’un lien et créer un modèle spécifique? jquery valide le pourcentage total de deux entrées non supérieur à 100%

.preventDefault () ne fonctionne pas sur. (‘input’, function {})

J’aimerais limiter le nombre de caractères de ma division modifiable à 10. Une fois que l’utilisateur a atteint la limite, j’aimerais utiliser la méthode .preventDefault () pour protéger la division de caractères supplémentaires. Pouvez vous m’aider s’il vous plait? JSFiddle https://jsfiddle.net/7x2dfgx6/1/ HTML 

OOOOO

JQuery 

  jQuery(document).ready(function($){ const limit = 10; rem = limit - $('#About').text().length; $("#counter").append("You have " + rem + " chars left."); $("#About").on('input', function(event) { var char = $('#About').text().length; rem = limit - char; $("#counter").html("You have " + rem + " chars left."); if(char>limit) { event.preventDefault(); //TODO } }); });

Pour répondre à votre question principale:
.preventDefault() annuler le comportement des événements pouvant être annulés . événement d’ input n’est pas.

Pour vérifier si un event est annulable, essayez: console.log(event.cancelable); .
Pour l’ input il dit “faux”

Vous voudrez peut-être quelque chose comme ceci (non testé): 

 const limit = 10; var rem = limit - $('#About').text().length; $("#counter").append("You have " + rem + " chars left."); $("#About").on('input', function(event) { var char = $(this).text().length; rem = limit - char; if(rem <= 0){ $(this).text($(this).text().slice(0, limit)); } $("#counter").html("You have " + rem + " chars left."); });

MODIFIER

JSFiddle demo
Comme c’est contentEditable , j’ai dû utiliser un code supplémentaire (à partir de cette réponse) pour définir un signe d’insertion à la fin de l’entrée.

utiliser keydown au lieu de l’ input 

 jQuery(document).ready(function($){ const limit = 10; rem = limit - $('#About').text().length; $("#counter").append("You have " + rem + " chars left."); $("#About").on('keypress', function(event) { var char = $('#About').text().length; if(char>limit) { return false; //or event.preventDefault(); //TODO } rem = limit - char; $("#counter").html("You have " + rem + " chars left."); }); });

DEMO

Essayez de changer la valeur de l’atsortingbut contenEditable. Aussi, je règle le contrôle de la limite à> = 

 jQuery(document).ready(function($){ const limit = 10; rem = limit - $('#About').text().length; $("#counter").append("You have " + rem + " chars left."); $("#About").on('input', function(event) { var char = $('#About').text().length; rem = limit - char; event.preventDefault(); if(char>=limit) { $('#About').attr('contenteditable','False'); //TODO } $("#counter").html("You have " + rem + " chars left."); }); });