2017年8月5日(土)
[Javascript] event.returnValue #HTML5&CSS3&JavaScript
[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>が記述される。
細かいことであるが、改行で[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