ガレコレ
2017年8月5日(土)
[Javascript] event.returnValue HTML5&CSS3&JavaScript
 タグ属性contentEditable="true"を記述すると、そのタグに挟まれた部分が、編集できるようになる。

 細かいことであるが、改行で[enter]を打ったら、<div></div>になるところを、<br>にしたい。

 将来的には、execCommand("insertBrOnReturn")でできるようになるのだろうが、現在対応しているブラウザはFirefoxのみである。

 キーボードを検知する方法、および<br>を挿入する方法は分かっていたが、[enter]の元々の動作をキャンセルする方法を知らなかった。

 event.returnValue = false;で簡単にキャンセルできた。対応しているブラウザは、丁度うまい具合に、Firefoxのみ対応していないが、IE11を含む主要ブラウザで対応している。


-- 抜粋 --
<head>

<script>

window.onload = _setup;

function _setup(){
 document.getElementById("id_text").addEventListener("keypress",_break);
}

function _break(){
 if(event.keyCode===13){
  document.execCommand("insertHTML",false,"<br>");
  event.returnValue = false;
 }
}

</script>

</head>

<body>

<div id="id_text" contentEditable="true">Edit area</div>

</body>
--

 [enter]でも、[shift]+[enter]でも、<br>が記述される。
 
お問い合わせ


by Network Communication Note