caractères de blocs de champ de texte d'entrée, entrée de miroir dans la durée ou div

Question

j'ai quelques html

<input type="text" name="name" value="" id="name"> 
<div id="preview"></div> 

Les règles d'entrée dans le champ:

• Lettres AZ az Espace 0-9 et tableau de bord , pas d'autres caractères autorisés
  
• Entrée de caractères interdits ne devrait rien faire
  

Les règles de la div:

• Afficher chacun des personnages comme il est entré dans le champ de saisie
  
• Ne pas afficher les caractères sont interdits
  
• Quand un espace est rencontré, le montrer comme dash
  

Plusieurs potions ont fonctionné, ne fonctionnaient pas ou se comportaient mal. Cette version semble fonctionner dans tous les cas, je peux tester autre que backspace/delete est non fonctionnel. Seulement testé dans Safari jusqu'à présent.

Il existe d'autres zones "getcha", comme entrer du texte entre des textes déjà entrés, sélectionner tout, en utilisant les touches fléchées, tout cela joue un rôle dans ce problème.

$(document).ready(function(){ 
    $('#name').keypress(function(e) { 
    // get key pressed 
    var c = String.fromCharCode(e.which); 
    // var d = e.keyCode? e.keyCode : e.charCode; // this seems to catch arrow and delete better than jQuery's way (e.which) 
    // match against allowed set and fail if no match 
    var allowed = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890- '; 
    if (e.which != 8 && allowed.indexOf(c) < 0) return false; // d !== 37 && d != 39 && d != 46 && 
    // just replace spaces in the preview 
    window.setTimeout(function() {$('#preview').text($('#name').val().replace(/ /g, '-'));}, 1); 
    }); 
}); 

S'il existe un moyen de mettre une prime monétaire sur ce poste, faites le moi savoir. Oui, c'est là que je suis avec celui-ci :)

Answer 1

Après avoir bricolé, j'ai refaçonné ma solution précédente. Cette version devrait être identique à Twitter. Je garde vivante ma vieille réponse simplement parce qu'elle est techniquement valide, ce qui permet de comparer les différentes approches.

$(document).ready(function() { 
    var SpacePattern =//g; 

    var name = $("#name"); 
    var preview = $("#preview"); 

    var updatePreview = function() { 
     preview.text(name.val().replace(SpacePattern, "-")); 
    }; 

    name.keypress(function (e) { 
     if (e.which > 0 && // check that key code exists 
      e.which != 8 && // allow backspace 
      e.which != 32 && e.which != 45 && // allow space and dash 
      !(e.which >= 48 && e.which <= 57) && // allow 0-9 
      !(e.which >= 65 && e.which <= 90) && // allow A-Z 
      !(e.which >= 97 && e.which <= 122) // allow a-z 
      ) { 
      e.preventDefault(); 
     } 
     else { 
      setTimeout(updatePreview, 0); 
     } 
    }); 

    name.keyup(updatePreview); // Needed by IE for Delete and Backspace keys 
}); 

Answer 2

Essayez ceci: 1. Lorsque vous enfoncez la touche, copiez la valeur TextField précédente. 2. Lorsque la touche est enfoncée, utilisez RegEx pour valider le texte (quelque chose comme/^ [a-zA-Z0-9 -] * $ /), si ce n'est pas le cas, remplacez la valeur par l'ancienne.

Voici le code:

var ValidPattern = /^[a-zA-Z0-9\- ]*$/; 
$(document).ready(function(){ 
    $('#name').keydown(function(e) { 
     var aValue = $('#name').val(); 
     $('#name').attr("oldValue", aValue); 

     return true; 
    }); 
    $('#name').keyup(function(e) { 
     var aValue = $('#name').val(); 
     var aIsMatch = aValue.search(ValidPattern) != -1; 
     if(aIsMatch) { 
      $('#preview').text(aValue); 
     } else { 
      var aOldValue = $('#name').attr("oldValue"); 
      $('#name') .val (aOldValue); 
      $('#preview').text(aOldValue); 
     } 
    }); 
}); 

essayer.

Answer 3

Je pense que la meilleure méthode sera de garder un bouton et après avoir entré le texte à l'intérieur de la zone de texte et en cliquant sur le bouton le montrer dans la div. Ce sera beaucoup plus facile et convivial.

Il serait préférable de ne pas essayer d'entraver les actions par défaut d'un utilisateur avec le clavier.

Answer 4

J'ai testé ce qui suit dans Firefox, Safari et Internet Explorer. À moins que je n'ai pas entièrement compris votre objectif, je crois que cela devrait résoudre votre problème.

J'ai fini par écrire un plugin jQuery pour gérer la position du curseur d'entrée. La source du plugin est incluse ci-dessous ou disponible sur le site du plugin jQuery (http://plugins.jquery.com/project/caret-range).

$(document).ready(function() { 
    var InvalidPattern = /[^a-z0-9\- ]+/gi; 
    var SpacePattern =//g; 

    var name = $("#name"); 
    var preview = $("#preview"); 

    var callback = function (e) { 
     setTimeout(function() { 
      // Get range and length to restore caret position 
      var range = name.caret(); 
      var len = name.val().length; 

      // Blur element to minimize visibility of caret jumping 
      name.get(0).blur(); 

      // Remove invalid characters, and update preview 
      name.val(name.val().replace(InvalidPattern, "")); 
      preview.text(name.val().replace(SpacePattern, "-")); 

      // Restore caret position 
      var diff = len - name.val().length; 
      name.caret(range.start - diff, range.end - diff); 
     }, 0); 
    }; 

    name.keypress(callback); 
    name.keydown(callback); // Needed by IE to update preview for Delete and Backspace 
}); 

/* 
* jQuery Caret Range plugin 
* Copyright (c) 2009 Matt Zabriskie 
* Released under the MIT and GPL licenses. 
*/ 
(function($) { 
    $.extend($.fn, { 
     caret: function (start, end) { 
      var elem = this[0]; 

      if (elem) {       
       // get caret range 
       if (typeof start == "undefined") { 
        if (elem.selectionStart) { 
         start = elem.selectionStart; 
         end = elem.selectionEnd; 
        } 
        else if (document.selection) { 
         var val = this.val(); 
         var range = document.selection.createRange().duplicate(); 
         range.moveEnd("character", val.length) 
         start = (range.text == "" ? val.length : val.lastIndexOf(range.text)); 

         range = document.selection.createRange().duplicate(); 
         range.moveStart("character", -val.length); 
         end = range.text.length; 
        } 
       } 
       // set caret range 
       else { 
        var val = this.val(); 

        if (typeof start != "number") start = -1; 
        if (typeof end != "number") end = -1; 
        if (start < 0) start = 0; 
        if (end > val.length) end = val.length; 
        if (end < start) end = start; 
        if (start > end) start = end; 

        elem.focus(); 

        if (elem.selectionStart) { 
         elem.selectionStart = start; 
         elem.selectionEnd = end; 
        } 
        else if (document.selection) { 
         var range = elem.createTextRange(); 
         range.collapse(true); 
         range.moveStart("character", start); 
         range.moveEnd("character", end - start); 
         range.select(); 
        } 
       } 

       return {start:start, end:end}; 
      } 
     } 
    }); 
})(jQuery);