入力時のJavaScriptのテキスト操作ですか？

-2

私はtextareaを持っていますが、ユーザーは特定の方法で何かを入力する必要がありますが、textareaに表示されるテキストは入力する文字と異なる必要があります。したがって基本的に毎回のキーと呼ばれる関数が必要です押された私はonkeydownとonkeyupでそれをやろうとしましたが、私は成功しませんでした。入力時のJavaScriptのテキスト操作ですか？

私はそれをよりよく説明する例を挙げます。 "letters-pressed"はユーザが実際に入力しているテキストになり、 "letters-show"はtextareaに表示されるテキストになります。

手紙プレス：「こんにちは、あなたは何かで私を助けてくださいすることができますそれは難しいことではないのですか？」
文字-示したが：「こんにちは,,私はあなたの助けをしたいいけないそれは難しいことではないのですか？」
私は「こんにちは」後の第2の「コンマ」を押すと

だから、私が欲しいのは私のテキストは、私が入力したものとは異なるものになりますテキストエリアでの事前スクリプトテキストを示す開始すること、である。

「questionmark」を使うと、もう一度本物のテキストを表示したいです。 2番目の「カンマ」とその「疑問符」の間のすべては、後で使用する変数に格納する必要があります。

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

UPDATE：私はそれが動作することに近いだが、現在それはビットが「遅い」動作します。最初に入力された文字が表示され、2番目の文字を入力すると、最初の文字がフィルタリングされます。私は瞬時にする必要があるので、文字がテキストエリアに表示される前に関数が呼び出されます。文字列を配列に入れ、現在の文字をプリスクリプト文字列内の同じインデックス文字と比較することで動作するように管理しました。それが同じであれば、それを残しておくと、あらかじめスクリプト化された文字列から手紙を得ることができます。

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>

出典

2017-10-23 Nino Jovic

何ユーザーはカンマ、または種類を入力しない場合は、「おはよう、...」ここでのアクションでそれを参照してください？ユーザーが入力しているフィールドの内容を変更するためにキーイベントを使用すると、ユーザーが既存の文字列の始めまたは真ん中を編集している場合にカーソル位置を追跡する必要があるため注意が必要です。 – nnnnnn

これは、テキストを特定の方法で入力することです。正しく入力されていないと、入力しなければならないものをユーザーが入力するようになります。 –

のは、あなたがテキストエリアのjQueryを使用して

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

があるとしましょう、あなたは

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

これを打破レッツを使用してテキストエリアの値を変更することができます：

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

これは、ドキュメント準備機能の略語です。ドキュメントがロードされた後にスクリプトが実行されることを意味します。文書が

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

ロードされると

function(){}

パートのすべてのコードは、この関数は、DOMの外にテキストエリアをつかむためにjQueryのセレクタの構文を使用して実行されます。これは、 "keyup"イベントと "paste"イベントのイベントリスナーを割り当てています。この関数内のすべてが、それらのアクションの1つが発生するたびに実行されるようになりました。

私は、あなたがあなたのテキストエリアに何をしたいのかの詳細を実装するつもりですが、この無名関数内で起こるはずです。セレクタと

val()

機能を使用して私の例ここでは、簡単なセット「何らかの値」にテキストエリアの値はいつでもイベントが発生し、。

は jsfiddle link

出典

2017-10-23 00:48:09

ありがとうございますが、それは私にとってはうまくいかないでしょう。私は入力中に文字でフィルタリングされるテキストが必要です。リアルタイムフィルタ。要点は、私が何を入力しているのかを知っているが、私の隣にいる人は私が何か他のものを入力していると思っており、それは手紙である必要があるということです。問題は、実際の入力が何であるかを決して正確に知ることができないため、何をフィルタリングするのか分からないことです。私が必要とするのは、「,,」とタイプするとすぐにすべてをフィルタリングし、「？」と入力するまでです。それ以外は問題ありません。しかし、フィルタリングはすべての文字入力で発生する必要があります。 –

ええ、私が言ったように、イベントリスナー内に独自のロジックを実装する必要があります。それは毎回発火するでしょう。 "keyup"リスナークロージャに引数 "e"を追加してイベントを取得し、e.keyCode（）[link]（https://jsfiddle.net/tgkjbuan/2/）でキーを押すことができます。 –

入力時のJavaScriptのテキスト操作ですか？

答えて

関連する問題