Help us understand the problem. What is going on with this article?

textareaが異常に重い時はspellcheck="false"

More than 1 year has passed since last update.

経緯

現在英作文を書くwebサービスを趣味で作っているが、50words程度の文章であってもtextareaに書き込むとページが非常に重くなり、一文字打つのにすら大幅な遅延が発生してしまう。
スクリーンショット 2018-02-22 14.16.40.png

(※写真の文章はアメリカ・トランプ大統領の一般教書演説の一部です)
これは困った、と思い色々調べた。

結果

この赤線が原因だった。
スクリーンショット 2018-02-22 14.16.40.png
この赤線はHTMLのspellcheck属性によるもの。テキストを編集可能な要素について、スペルミスがあったら教えてくれるらしい。現在は日本語には未対応らしいが、英文はちゃんとチェックしてくれる。(の割に、"than"とか"year"とか絶対スペルミスなさそうな単語にもついてるのはなぜだろう・・・)
文章を入力するたびにいちいちスペルチェックをするので、こんなに重くなっていたようだ。
ちなみに、下のリンクにあるように、現在ほとんどのブラウザがtextareaについてはデフォルトでspellcheck="true"を適用している。なので、なんとなく作ったtextareaに英文を打つと自動的にスペルチェックがなされる。なんてお節介な・・・
スクリーンショット 2018-02-22 14.36.44.png

spellcheck

と、いうわけで、こうだったHTMLタグを

<textarea></textarea>

こう直すと

<textarea spellcheck="false"></textarea>

スクリーンショット 2018-02-22 14.36.12.png
見た目もスッキリしたし、めちゃくちゃ軽くなった。皆さんもお気をつけください。

参考

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/spellcheck
https://stackoverflow.com/questions/16736198/typing-in-textarea-super-slow-when-lots-of-text-inside

liukoki
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away