テキストエリアで、リターン時に自動的にbrを入れる。
2009年11月28日
Nucleusでは各アイテムの表示のとき、改行コードに自動的に<br />が付加される。ブログ設定でこの機能を使うかどうかを設定できるようになっている。
ただこのやり方では、例えばテーブルを作成したい場合などに自動的に追加された<br />が邪魔になってしまう。
そこでJeansでは、アイテム編集画面でJavascriptを使って解決することを考えた。リターンキーを押したときに<br />が自動的に追加されるようにする。このあたりは、HTMLのことをよく知らないユーザーにはあまりフレンドリーではないが、そこは別途WYSIWYGを用意することで対処することにして、とりあえず自分自身が使いやすいと思うインターフェースにしてみる。
試行錯誤の後に完成したJavascriptが、次のとおり。とりあえず、FireFoxとIEでの動作を確認した。OperaとかSafariではまだ未試験だが、とりあえず後回しでよかろう。
紆余曲折の結果、上のコードになった。リターンキーを押すと、<br />が自動的に付加される。付加したくない場合は、Shift + Enterで。
以下、不採用になった書きかけのコード。IEで、selectionStartとselectionEndを実現するためのもの。この部分はうまく動いていたので捨てるにしのびず、メモしておく。
ただこのやり方では、例えばテーブルを作成したい場合などに自動的に追加された<br />が邪魔になってしまう。
そこでJeansでは、アイテム編集画面でJavascriptを使って解決することを考えた。リターンキーを押したときに<br />が自動的に追加されるようにする。このあたりは、HTMLのことをよく知らないユーザーにはあまりフレンドリーではないが、そこは別途WYSIWYGを用意することで対処することにして、とりあえず自分自身が使いやすいと思うインターフェースにしてみる。
試行錯誤の後に完成したJavascriptが、次のとおり。とりあえず、FireFoxとIEでの動作を確認した。OperaとかSafariではまだ未試験だが、とりあえず後回しでよかろう。
<html><body>
<script type="text/javascript">
function test(element,event){
if (event.keyCode!=13) return true;
if (event.shiftKey) return true;
if (element.selectionStart) {
// FireFox
var t=''+element.value;
var start=element.selectionStart;
var end=element.selectionEnd;
element.value=t.substring(0,start)+'<br />'+t.substring(start);
element.selectionStart=start+6;
element.selectionEnd=end+6;
return true;
} else if (element.createTextRange) {
// IE
var range = document.selection.createRange();
range.text='<br />';
range.select();
return true;
}
return true;
}
</script>
<textarea onKeyPress="return test(this,event);" cols="100" rows="30"></textarea>
</body></html>紆余曲折の結果、上のコードになった。リターンキーを押すと、<br />が自動的に付加される。付加したくない場合は、Shift + Enterで。
以下、不採用になった書きかけのコード。IEで、selectionStartとselectionEndを実現するためのもの。この部分はうまく動いていたので捨てるにしのびず、メモしておく。
var range = document.selection.createRange();
var range2= range.duplicate();
range2.moveToElementText(element);
range2.setEndPoint('EndToEnd',range);
var start = range2.text.length - range.text.length;
var end = start + range.text.length;