2017-11-01 5 views
0

stackoverflowers私は文字で入力テキストをキャプチャする必要があるオートコンプリートアプリケーションに取り組んでいます。現在、jqueryで "input"イベントを聞いています。関数は、このように、全体の入力値でトリガされるので、Jqueryがテキストをペーストした場合と同様に

私が直面してる問題は、貼り付けたテキストである:

貼り付け値は=、

input.val() = "demo" 

を「デモ」しかし、私達成するために探していますと、このように4回、それが実際にでタイプされたかのように、その貼り付けた値を分解し、機能をトリガすることである。

貼り付け値は=

を 『デモ』

vanilla JSまたはJqueryを使用してこの問題を解決する方法に関するヒントや指示を教えてください。

ありがとうございます。

答えて

1

は、次のアプローチを試してみてください: "、

<input type="text"> 
<div></div> 

<script> 
    var myInput = $("input"); 
    var value = ''; //to store previous input value 

    myInput.on('input', function() { 
    var current = myInput.val(); 
    var dif = current.replace(value, ''); 
    if(dif.length) { 
     var out = value; 
     for(var i = 0; i < dif.length; i++) { 
     out += dif.substr(i, 1); 
     output(out); 
     } 
    } 
    value = current; 
    }); 

    function output(text) { 
    console.log(text); 
    $("div").text(text); 
    // here you can even to re-set input value via myInput.val 
    } 
</script> 

は、 "345"、 "2"、入力に "1" を試してみて、あなたは "1"、 "12" を取得し、 "123"、 "1234" 12345 "と表示されます。

この方法は、入力の最後にテキストを追加する場合にのみ機能します。入力の最後だけでなくテキストを挿入する必要がある場合は、手順を更新する必要があります。

Plunkerも参照してください。

+0

私はすでに使用していますが、oninputがトリガーされる前に貼り付けられたテキストをキャプチャする必要があります。 私はonpasteイベントのデフォルトの動作を防止して、それを解決して、oninputトリガーと区別できるようにしようとしています。 – moy2010

+0

@ moy2010私は答えを更新し、解決案を提出しました。すべてのケースを網羅するわけではありませんが、その考え方は十分に明確でなければなりません。 'output'メソッドは、それがどのように追加されても(1つずつまたはグループで)入力の各シンボルごとに呼び出されています。 – dhilt

+0

あなたの助けをありがとう、dhilt!あなたのforループによって返される "out"変数は、実際に私が望んだものですが、何らかの理由でtypeWatchプラグインが入力フィールド値の変更を認識しません(フィールド値に "out"の内容を設定しています) 。 サンプルコードから試してみる必要があります。 素晴らしい週末を過ごしましょう。 – moy2010

0

入力の長さを確認してから画面に表示できると思います。

関連する問題