inputタグやtextareaタグでEnterキーを無効にする方法は調べたらすぐ出てくるが、contenteditableはそうではない。
因みに、inputタグやtextareaタグでEnterキーを無効にするには、
<input onKeyPress={(event) => {if(event.key === 'Enter') return false}} />
で制御可能なはず。
だが、contenteditableな要素はこれでは制御できない。
構わずに、Enterキーが有効になり、改行を行ってしまう。
<div
contentEditable="true"
onKeyPress={(event) => {
if(event.key === 'Enter') {
return event.preventDefault()
}
}}
/>
このように記述すれば、改行を防ぐことができる。
日本語入力の際に確定する時のEnterキーは有効となっている。
因みに、日本語入力の際に確定するときのEnterキーも無効化されると思って、以下のように記述したが、その必要はなさそうだ。
<div
contentEditable="true"
onKeyPress={(event) => {
if(event.key === 'Enter' && !isInputting) {
return event.preventDefault()
}
}}
onCompositionStart={() => {setIsInputting(true)}}
onCompositionEnd={() => {setIsInputting(false)}}
/>
onCompositionStartは入力開始時に発火して、onCompositionEndは入力確定の時に発火するメソッドです。