ページ上の選択部分の変更

  ユーザがマウスやキーボードで選択した内容の変更(単一ノードの場合のみ)



このページのどの部分でもいいですから、選択して『竹取物語』の下にあるボタンをクリックすると、入力内容で選択部分を置き換えます。

window.getSelection による取得

window.getSelection() の結果は Selection オブジェクトで、anchorOffset プロパティと focusOffset プロパティによって、開始部分と終了部分を知る事ができます。但し、対象の Selection オブジェクト内に複数ノードが含まれていると、複数のノード処理を行う事になるので、単一ノードという前提でのみ動作します

目的の文字列は、anchorNode のテキストノードなので、nodeValue で取得しておいた後 substring によって置き換える部分以外を取り出して最後に結合しますが、ノードがまたがった場合の削除で、IE11 がうまく動作せず削除のみ実行されます

できあがった文字列を anchorNode.nodeValue にセットしなおすと内容が変更されます

選択部分の表示

今は昔竹取の翁といふものありけり。野山にまじりて、竹をとりつゝ、萬の事につかひけり。名をば讃岐造麿となんいひける。その竹の中に、本光る竹ひとすぢありけり。怪しがりて寄りて見るに、筒の中ひかりたり。それを見れば、三寸ばかりなる人いと美しうて居たり。翁いふやう、『われ朝ごと夕ごとに見る、竹の中におはするにて知りぬ、子になり給ふべき人なンめり。』とて、手にうち入れて家にもてきぬ。妻の嫗にあづけて養はす。美しきこと限なし。いと幼ければ籠に入れて養ふ。竹取の翁この子を見つけて後に、竹をとるに、節をへだてゝよ毎に、金ある竹を見つくること重りぬ。かくて翁やうやう豐になりゆく。この兒養ふほどに、すくすくと大になりまさる。三月ばかりになる程に、よきほどなる人になりぬれば、髪上などさだして、髪上せさせ裳着(もぎ)す。帳(ちやう)の内よりも出さず、いつきかしづき養ふほどに、この兒のかたち清(けう)らなること世になく、家の内は暗き處なく光滿ちたり。翁心地あしく苦しき時も、この子を見れば苦しき事も止みぬ。腹だたしきことも慰みけり。翁竹をとること久しくなりぬ。勢猛の者になりにけり。この子いと大になりぬれば、名をば三室戸齋部秋田を呼びてつけさす。秋田なよ竹のかぐや姫とつけつ。このほど三日うちあげ遊ぶ。萬の遊をぞしける。男女(をとこをうな)きらはず呼び集へて、いとかしこくあそぶ。

<script>
$(function(){
    $("#entry01")
        .attr({type:"text", size: 30 })
        .val("●●●この文字列で変更●●●")
    ;

    $("#action01")
        .attr("type","button")
        .click(function(){
            var sel = window.getSelection();
            if ( sel ) {
                if ( sel.isCollapsed ) {
                    alert("選択されていません");
                }
                else {
                    var base = sel.anchorNode.nodeValue;
                    if ( base != null ) {
                        var text1 = base.substring( 0, sel.anchorOffset );
                        var text2 = base.substring( sel.focusOffset, base.length );
                        sel.anchorNode.nodeValue = text1 + $("#entry01").val() + text2;
                    }
                }
            }
            else {
                alert("Selection オブジェクトが定義されていません");
            }
        })
        .val("選択テキストを表示");
    
});
</script>
<h3>選択部分の表示</h3>
<div id="div01" style='padding:20px;'>今は昔竹取の翁といふものありけり。野山にまじりて、竹をとりつゝ、萬の事につかひけり。名をば讃岐造麿となんいひける。その竹の中に、本光る竹ひとすぢありけり。怪しがりて寄りて見るに、筒の中ひかりたり。それを見れば、三寸ばかりなる人いと美しうて居たり。翁いふやう、『われ朝ごと夕ごとに見る、竹の中におはするにて知りぬ、子になり給ふべき人なンめり。』とて、手にうち入れて家にもてきぬ。妻の嫗にあづけて養はす。美しきこと限なし。いと幼ければ籠に入れて養ふ。竹取の翁この子を見つけて後に、竹をとるに、節をへだてゝよ毎に、金ある竹を見つくること重りぬ。かくて翁やうやう豐になりゆく。この兒養ふほどに、すくすくと大になりまさる。三月ばかりになる程に、よきほどなる人になりぬれば、髪上などさだして、髪上せさせ裳着(もぎ)す。帳(ちやう)の内よりも出さず、いつきかしづき養ふほどに、この兒のかたち清(けう)らなること世になく、家の内は暗き處なく光滿ちたり。翁心地あしく苦しき時も、この子を見れば苦しき事も止みぬ。腹だたしきことも慰みけり。翁竹をとること久しくなりぬ。勢猛の者になりにけり。この子いと大になりぬれば、名をば三室戸齋部秋田を呼びてつけさす。秋田なよ竹のかぐや姫とつけつ。このほど三日うちあげ遊ぶ。萬の遊をぞしける。男女(をとこをうな)きらはず呼び集へて、いとかしこくあそぶ。</div>
<br>
<input id="entry01"> <input id="action01">













  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ