3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Knockout.jsで日本語入力中テキストの文字数を正しく表示する

Posted at

Knockout.jsで入力テキストの文字数を表示させるような場合、value bindingのvalueUpdateで入力イベントに連動して表示を更新します。
公式のサンプル通りにafterkeydownを利用して文字数表示を行うと、Firefoxなどでは日本語入力中にkeydownイベントが発生しないため正しく更新することができません。

解決策として、監視するイベントにinputイベントを指定します。

<input data-bind="value: comment, valueUpdate: 'afterinput'">
<span data-bind="text: letterCount"></span>

<script>
function viewModel() {
  var self = this;

  self.comment = ko.observable("");
  self.letterCount = ko.computed(function() {
    return self.comment().length;
  });
};
ko.applyBindings(new viewModel());
</script>

inputイベントはinput/textareaの入力内容が変化したタイミングで発生するイベントで、日本語入力中で未確定な状態やコピー&ペーストで編集した場合でも検出することができます。

主要なブラウザではサポート済み(IE8でも動作確認)ですが、未対応のブラウザまで考慮する必要がある場合には、keydownとinputをどちらも指定することで、少なくともkeydownイベントでは処理を実行させることができるでしょう(input対応時には2回ずつ実行されてしまいますが…)。

inputイベントをブラウザが処理した後に反映されるよう、prefixにはafterを付加します。

####参考

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?