General

テキストエリアで、リターン時に自動的にbrを入れる。

2009年11月28日

Nucleusでは各アイテムの表示のとき、改行コードに自動的に<br />が付加される。ブログ設定でこの機能を使うかどうかを設定できるようになっている。

ただこのやり方では、例えばテーブルを作成したい場合などに自動的に追加された<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;

コメント

Luke (2026年9月9日 02:41:24)

Discover an online casino website designed for easy
navigation, useful information, and enjoyable entertainment.
Discover casino games, real money options, bonuses, payment methods, and practical guides in onne organized place.
Clear navigation mawkes it easy to compare features, unddrstand
basic rules, and find relevant content. The site offers a comfortable experirnce for seeking reliable casino information, helpful tips, aand
responsible online gaming content today.

コメント送信