Kann ich das eingegebene Zeichen bei Tastendruck bedingt ändern?

Question

Ist es möglich, das eingegebene Zeichen bei Tastendruck zu ändern, ohne es manuell zu tun?

Zum Beispiel, wenn ich Großbuchstaben erzwingen wollen, basierend auf einer Bedingung, wäre es schön, folgendes zu tun:

function onKeypressHandler(e) 
{ 
    if (condition) 
    { 
     e.which -= 32; 
    } 
} 

Aber natürlich, das nicht funktioniert.

HINWEIS: Dies ist nicht ein auf der ganzen Linie großgeschrieben, aber nur bestimmte Zeichen.

Vielleicht will ich if (e.which >= 97 && e.which <= 102) oder if (Wind.Direction == 'South') oder was auch immer sagen - die Bedingung selbst ist nicht wichtig, aber die großgeschrieben muss nur auf den aktuellen Charakter gilt nicht die gesamte Eingabe.

Ich kann es tun, indem ich das geänderte Zeichen manuell angehängt habe, aber das ist eine hässliche und chaotische Art, es zu tun, und wahrscheinlich langsamer als es sein könnte.

function onKeypressHandler(e) 
{ 
    if (condition) 
    { 
     $j(this).val($j(this).val() + String.fromCharCode(e.which - 32)); 
     return false; 
    } 
} 

Ein spezifischen Fehler mit dieser Methode - wenn alle eingegebenen Texte auswählen und einen Schlüssel eingeben, wenn sie in diesen fallen dann ist es vorhandene Inhalte nicht zu entfernen, sondern einfach anhängt zum Inhalt wollte der Benutzer entfernt. (Müsste untersuchen, jeden ausgewählten Text zu erkennen, um das zu lösen, der dieses noch hässlicher macht.)

Kann jemand eine bessere Lösung zur Verfügung stellen?

Answer 1

Das folgende wird die Aufgabe erledigen. Es basiert auf an answer I wrote to another question. Passen Sie die transformTypedChar Funktion an Ihre Bedürfnisse an; Mein Beispiel kapitalisiert nur die Buchstaben a-g.

Wenn Sie dies auf einem Textarea statt <input type="text"> benötigen, dann beachten Sie, dass es Probleme gibt in IE < = 8 mit Zeilenumbrüchen, die der folgenden Code aus Gründen der Kürze nicht behandelt. Sie können hier in ein Textfeld die Cross-Browser-Funktion zum Erhalten der Auswahl: Is there an Internet Explorer approved substitute for selectionStart and selectionEnd?

function transformTypedChar(charStr) { 
    return /[a-g]/.test(charStr) ? charStr.toUpperCase() : charStr; 
} 

document.getElementById("your_input_id").onkeypress = function(evt) { 
    var val = this.value; 
    evt = evt || window.event; 

    // Ensure we only handle printable keys, excluding enter and space 
    var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode; 
    if (charCode && charCode > 32) { 
     var keyChar = String.fromCharCode(charCode); 

     // Transform typed character 
     var mappedChar = transformTypedChar(keyChar); 

     var start, end; 
     if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") { 
      // Non-IE browsers and IE 9 
      start = this.selectionStart; 
      end = this.selectionEnd; 
      this.value = val.slice(0, start) + mappedChar + val.slice(end); 

      // Move the caret 
      this.selectionStart = this.selectionEnd = start + 1; 
     } else if (document.selection && document.selection.createRange) { 
      // For IE up to version 8 
      var selectionRange = document.selection.createRange(); 
      var textInputRange = this.createTextRange(); 
      var precedingRange = this.createTextRange(); 
      var bookmark = selectionRange.getBookmark(); 
      textInputRange.moveToBookmark(bookmark); 
      precedingRange.setEndPoint("EndToStart", textInputRange); 
      start = precedingRange.text.length; 
      end = start + selectionRange.text.length; 

      this.value = val.slice(0, start) + mappedChar + val.slice(end); 
      start++; 

      // Move the caret 
      textInputRange = this.createTextRange(); 
      textInputRange.collapse(true); 
      textInputRange.move("character", start - (this.value.slice(0, start).split("\r\n").length - 1)); 
      textInputRange.select(); 
     } 

     return false; 
    } 
}; 

Answer 2

Können Sie CSS verwenden?

<input type="text" style="text-transform: uppercase;" /> 

Answer 3

Nicht wirklich sicher, was Sie wollen, aber wird das funktionieren?

$('#my_element').keyup(function(){ $(this).val().toUpperCase(); }); 

oder eine Unterzeichenfolge verwenden, um das letzte Zeichen zu erhalten gedrückt und tun toUpperCase() auf das?

(psst ... Sie können auch Keydown oder Tastendruck verwenden).

Answer 4

Peter,

Sie könnten Inspiration finden Sie hier:

http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML15/jsdhtml15-05.htm

geht im Grunde um die verschiedenen Möglichkeiten, um diese ‚Flächen‘ auf den Tastendruck-Ereignissen und Funktionen zu suchen.

Answer 5

Wie wäre es, die Standardaktion zu verhindern und dann den Tastendruck auszulösen? Etwas wie,

function onKeypressHandler(e) 
{ 
    if (condition) 
    { 
     e.preventDefault(); 
     // create new event object (you may clone current e) 
     var ne = new jQuery.Event("keypress"); 
     ne.which = e.which - 32; 
     $(e.target).trigger(ne); // you may have to invoke with setTimeout 
    } 
} 

Answer 6

Sie haben, dies zu sehen .. ich mit mir selbst ziemlich glücklich war, nachdem es immer zu arbeiten ..

Sie möchten natürlich genügend Kriterien einbeziehen, um hier nicht in eine Schleife zu geraten.

Der folgende Code gibt false zurück, wenn die Bedingung true ergibt, aber das gleiche Ereignis wird mit einem anderen charCode ausgelöst, der nicht false zurückgibt.

document.getElementById("input1").onkeypress = Handler; 
function Handler(e) 
{ 
    e = e || window.event; 
    if (e.charCode == 97) 
    { 
     var evt = document.createEvent("KeyboardEvent"); 
     evt.initKeyEvent("keypress",true, true, window, false, false,false, false, 0, e.charCode -32); 
     this.dispatchEvent(evt); 
     return false; 
    } 
    return true; 
} 

könnten Sie in IE verwenden fireevent ... I verwendet http://help.dottoro.com/ljrinokx.php und https://developer.mozilla.org/en/DOM/event.initKeyEvent Referenz