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


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




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

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">













yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[jquery]
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
24/04/20 23:27:38
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube