JavaScript Textmanipulation während der Eingabe?

-2

Ich habe eine textarea, wo Benutzer etwas auf die spezifische Art eingeben muss, aber der Text, der in textarea zeigt, muss anders sein als derjenige, den er eintippt. So grundlegend brauche ich eine Art von Funktion, die immer Schlüssel genannt wird gedrückt. Ich habe versucht, es mit onkeydown und onkeyup zu tun, aber ich ohne Erfolg.JavaScript Textmanipulation während der Eingabe?

Ich werde ein Beispiel geben, um es besser zu erklären. "letters-pressed" ist der Text, den der Benutzer wirklich eintippt, und "letters-showed" sind diejenigen, die im textarea angezeigt werden.

Buchstaben gepresste: „Hallo, können Sie mir bitte mit etwas helfen Es ist nicht so schwer“
Buchstaben-zeigt: „Hallo ,, Ich habe nicht Ihre Hilfe will Es ist nicht so schwer“

Also, was ich will, ist, wenn ich das zweite „Komma“ nach „Hallo“ drücken, dass mein Text beginnt die Pre-scripted Text in Textbereich zeigt, die als die anders sein wird ich getippt.

Und wenn ich das "Fragezeichen" benutze, möchte ich den echten Text wieder anzeigen. Alles zwischen dem zweiten "Komma" und dem "Fragezeichen" muss in einer Variablen gespeichert werden, die ich später verwenden werde.

var hiddenText = ", i dont want your help";

UPDATE: Ich bin in der Nähe, es Arbeit zu machen, aber zur Zeit funktioniert es ein wenig „langsam“. Eingegebener Buchstabe wird zuerst angezeigt, und nach Eingabe des zweiten Buchstabens wird der erste Buchstabe gefiltert. Ich brauche es sofort, also wird die Funktion aufgerufen, bevor der Buchstabe im Textfeld angezeigt wird. Ich habe es geschafft, indem ich Strings in ein Array einfügte und dann den aktuellen Buchstaben mit dem gleichen Index-Buchstaben im vordefinierten String verglich. Und wenn es das gleiche ist, lass es, wenn es anders ist, den Buchstaben von der vorgeskripteten Zeichenkette erhalten.

function filter() { 
 

 
// $ufText is unfiltered text which is typed in. 
 
// $psTextArray is pre-scripted text. 
 
// $filtered text is, well, filtered text. 
 

 
let $ufTextArray = []; 
 
let $psTextArray = []; 
 
let $filteredText = ""; 
 

 
let $ufText = $("#txt").val(); 
 
$ufTextArray = $ufText.split(''); 
 
console.log($ufTextArray); 
 

 
let $psText = "Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?"; 
 
$psTextArray = $psText.split(''); 
 

 
for (let i=0; i<$ufText.length ; i++) { 
 

 
    if ($ufTextArray[i] != $psTextArray[i]) { 
 
    
 
     $filteredText = $filteredText + $psTextArray[i]; 
 
     $("#txt").val($filteredText); 
 

 

 
    } else { 
 
    
 
     $filteredText = $filteredText + $ufTextArray[i]; 
 
     $("#txt").val($filteredText); 
 

 
    } 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<textarea id="txt" cols="80" rows="2" onkeydown="filter()"></textarea> 
 
    
 
</body> 
 
</html>

Quelle

2017-10-23 Nino Jovic

Was passiert, wenn der Benutzer „Guten Morgen ...“ kein Komma, oder Typen geben? Beachten Sie, dass die Verwendung von Schlüsselereignissen zum Ändern des Inhalts des Felds, in das der Benutzer eintippt, kompliziert wird, da Sie die Cursorposition verfolgen müssen, wenn der Benutzer den Anfang oder die Mitte einer vorhandenen Zeichenfolge bearbeitet. – nnnnnn

Der springende Punkt ist es, den Text in einer bestimmten Art und Weise einzugeben, wenn es nicht richtig eingegeben wird, wird es nicht funktionieren, was den Benutzer zwingen wird, einzugeben, was getippt werden muss. –

Angenommen, Sie das Textfeld haben

<textarea rows="4" cols="50" id="testfield1"></textarea>

Mit jQuery, können Sie den Wert des Textbereichs

$(document).ready(function() { 
    $('#testfield1').on('keyup paste', function() { 
     $('#testfield1').val("some value"); 
    }); 
});

Lassen Sie uns brechen diese nach unten verwenden ändern :

$(document).ready(function() { });

Dies ist jQuery Kurzschrift für die Document Ready-Funktion; Dies bedeutet, dass das Skript nach dem Laden des Dokuments ausgeführt wird. Der gesamte Code in dem

function(){}

Teil ausgeführt wird, sobald das Dokument

$('#testfield1').on('keyup paste', function() { });

Diese Funktion verwendet jQuery Selektor Syntax geladen wird, um die TextArea- aus dem DOM zu greifen. Es wird ein Ereignis-Listener für die Ereignisse "keyup" und "paste" zugewiesen. Alles in dieser Funktion wird nun ausgeführt, wenn eine dieser Aktionen stattfindet.

Ich überlasse es Ihnen, um die Details von dem, was Sie Ihre Textfläche tun möchten, zu implementieren, aber es sollte innerhalb dieser anonymen Funktion passieren.Mein Beispiel hier einfache setzt den Wert der Textbereich auf „einen gewissen Wert“ jederzeit das Ereignis ausgelöst wird, unter Verwendung des Wählers und der

val()

Funktion.

In Aktion sieht hier jsfiddle link

Quelle

2017-10-23 00:48:09

Danke, aber das wird nicht für mich funktionieren. Ich brauche Text, der während der Eingabe Buchstabe für Buchstabe gefiltert wird. Echtzeitfilter Der Punkt ist, dass ich weiß, was ich tippe, aber die Person, die neben mir steht, denkt, dass ich etwas anderes tippe, und das muss Buchstabe für Buchstabe sein. Das Problem ist, dass ich nie genau wissen werde, was der wirkliche Input sein wird, also weiß ich nicht, was ich filtern soll. Was ich brauche, ist der Weg, alles zu filtern, sobald ich ",," eintippe und bis ich "?" Tippe. Alles andere ist in Ordnung. Aber die Filterung muss bei jeder Zeicheneingabe erfolgen. –

Ja, also wie ich schon sagte, Sie müssen Ihre eigene Logik innerhalb des Ereignis-Listeners implementieren; das wird jedes Mal feuern. Sie können dem "keyup" Listener Closure ein Argument "e" hinzufügen, um das Event zu erhalten, und dann die Taste mit e.keyCode() drücken [link] (https://jsfiddle.net/tgkjbuan/2/) –

JavaScript Textmanipulation während der Eingabe?

Antwort

Verwandte Themen