22

ユーザーが入力テキストボックスにテキストを入力した後、検索結果をテーブルに自動入力する Web サイトに取り組んでいます (Google インスタント検索に似ています)。

ユーザーが追加することで情報を入力すると、ノックアウトjsを取得してビューモデルを更新することができました

valueUpdate: 'afterkeydown'

ただし、データバインド属性に追加するには、ユーザーが右クリックしてテキストボックスにテキストを貼り付ける場合も処理する必要があるため、次のことを試しました。

valueUpdate: ['afterkeydown','mouseup']

しかし、それはうまくいきませんでした。ビューモデルを介してテキストボックスの値を読み取ろうとすると、入力テキストボックスからタブで移動するまで古い値を取得し続けました。

どうすればこれを修正できるか知っている人はいますか？

オスカー

4

2 に答える 2

27

valueUpdate:'input' を使用できます。Opera、Firefox、およびChromeで動作するようにテストしました。私は Linux ボックスを使用しているため、IE でテストすることはできません。このフィドルをチェックしてください

更新: IE8 でテストしましたが、動作しません。しかし、以下を使用するとうまくいくようです。

valueUpdate:['afterkeydown','propertychange','input']

これについてコメントしてくれた Michael Best に感謝します :)フィドルを更新しました

UPDATE okt 2014: 以下のコメントで kzh が言及しているように、Knockout.js の新しいバージョンの 1 つで、textInput バインディングが追加されました。このバインディングはこのシナリオを処理し、http://knockoutjs.com/documentation/textinput-binding.html を処理するブラウザーの癖が組み込まれています 。

于 2012-06-19T21:15:56.863 に答える
10

新しい方法

それ以外の：

data-bind="value: myValue, valueUpdate: ['input', 'textchange']"

textInput バインディングを使用できるようになりました。

data-bind="textInput: myValue"

ドキュメントから：

textInputバインディングは、テキスト ボックス ( ) またはテキスト エリア ( ) をビューモデル プロパティにリンクし<input>、<textarea>ビューモデル プロパティと要素の値の間で双方向の更新を提供します。valueバインディングとは異なり、textInputオートコンプリート、ドラッグ アンド ドロップ、クリップボード イベントなど、すべての種類のユーザー入力に対して DOM からの即時更新を提供します。

オールドウェイ

valueUpdate: ['afterkeydown','propertychange','input']

RightMouseClick→DeleteまたはRightMouseClick→をサポートしたい場合、IE9 では動作しませんCut。

私が思いついた解決策は、jQuery とjQuery Splendid Textchangeという jQuery プラグインを使用することです。jQuery とプラグイン スクリプトの両方をロードしたら、'textchange' イベントを問題なく使用できます。

valueUpdate: 'textchange'

しかし、いつの日か悪いブラウザーのサポートをやめるかもしれないので、私はこれを持っています:

valueUpdate: ['input', 'textchange']

これは、これと他のイベントをテストするために作成したフィドルです: http://jsfiddle.net/kaleb/w3ErR/

注：requirejs を使用している場合、jquery が常に適切に機能するためには、ノックアウトに強く依存している必要がある場合があります。

于 2013-11-13T15:03:54.297 に答える