例えば Alt+クリック で改行させたい

0   名前： yoro ： 2006/07/22（土） 07:48  ID:UkbhveQ3
漠然とした質問で申し訳ないのですが下記のようなことを
したいのです。

改行(<BR>)間隔が長い文章で、その任意の位置を例えばAlt+クリック
すると、そこに<BR>などが挿入されて改行表示する様なことは可能で
しょうか？
※ Altキーは他に置き換えてもかまいません。

onClickイベントなどだけでは、どの文字位置でクリックしたか？
を特定する方法が判りません。

また、特定のタグ部分だけの処理ではダメで、Body部全体で上記改行
処理を行いたいと考えています。

宜しくお願いします。
1   名前： Pid ： 2006/07/22（土） 07:48  ID:MDvGLGRF
謝る必要はないのですが，漠然とした質問には漠然としたアドバイスしか書けない，ということは覚悟しといて下さい (^^;)。

以下は Mozilla/Firefox，Safari 用（Opera は不可）。
http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl
http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/Ranges/Range.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>わがはいはねこである</title>
    
<p>迷亭君は気にも留めない様子で<em>「どうせ僕などは行徳の俎と云う格だからなあ」</em>と笑う。<em>「まずそんなところだろう」</em>と主人が云う。実は行徳の俎と云う語を主人は解さないのであるが，さすが永年教師をして胡魔化しつけているものだから，こんな時には教場の経験を社交上にも応用するのである。<em id="special">「行徳の俎というのは何の事ですか」</em>と寒月が真率に聞く。主人は床の方を見て<em>「あの水仙は暮に僕が風呂の帰りがけに買って来て挿したのだが、よく持つじゃないか」</em>と行徳の俎を無理にねじ伏せる。</p>

<script type="text/javascript">
/*
if (document.implementation
    && document.implementation.hasFeature ('HTML', '2.0')
    && document.implementation.hasFeature ('Events', '2.0')
    && document.implementation.hasFeature ('Range', '2.0')
    && typeof getSelection != 'undefined')
*/
document.body.addEventListener ('click', function (event) {
    if (event.altKey) {
        var r = document.createRange ();
        var s = getSelection ();
        
        r.setStart (s.anchorNode, s.anchorOffset);
        r.insertNode (document.createElement ('br'));
    }
}, false);

</script>


MSIE の場合は（今，手元にないので試せませんが）textRange.moveToPoint とか使えば何とかなるのではないでしょうか。
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/movetopoint.asp
2   名前： yoro ： 2006/07/22（土） 07:48  ID:UkbhveQ3
Pidさん、いつも私にとって新鮮な情報を戴き感謝します。
私は、IEしか考えていませんのでtextRange.moveToPoint で行けそうな気がします。

ところが、もっと基本的な部分で解決ができないことが出てきました。

最初の質問を具体的に記載しますと、

あるＤＢの回答データを表示してあるフレームで文字が小さかったり、
改行が少ない長文が表示されています。

これを、読みやすくするためにコンテキストメニューを作成し整形しています。

したいことは、コンテキストメニュー終了後に、別の改行追加用コンテキストメニュー
などを呼び出さずに、最初の整形用コンテキストメニューで、呼び出し元のdocument
に対して、Body部にクリックイベントなどを追加して処理させたいと考えています。

ところが、コンテキストメニューのhtm(JavaScript)の中で、

    function testf() {
　　　　alert("testf");
　　}

　　var obody = doc.getElementsByTagName("body")[0];
　　obody.attachEvent("onclick",testf);


などとやってみたのですが、イベントが発生しません。

それではと、setAttribute("onclick", "alert('testf')")
も試したのですが、ソース自体は書き換えれれているのが確認できますが
機能しません。

コンテキストメニューからイベントの追加はどうすればよいのでしょうか？


3   名前： Pid ： 2006/07/22（土） 07:48  ID:Gt/TlD52
よろしければ，状況が再現する最小限の HTML ソース＆JScript コードを御提示頂けますか。

getElementsByTagName ('body') する段階でまだ body 要素が読み込まれてなかったとか（でも，それだと attachEvent 呼び出し時にエラーが出るはずですし……）。
4   名前： yoro ： 2006/07/22（土） 07:48  ID:UkbhveQ3
Pidさん、いつも感謝しております。

さて、今回の改行を入れる件に関してはcontentEditableを切り替えることで
対処しました。
⇒これだとhidden属性のテキストボックス(INPUT)が表示されますが、改行だけでなく
文字編集もできるので、これはこれで便利です。

しかし、コンテキストメニューから呼び出し元のhtmにイベントを追加できるとなれば
色々な利用方法が期待できるので、対処方法があれば是非知りたいです。

> getElementsByTagName ('body') する段階でまだ body 要素が読み込まれてなかったとか
→コンテキストメニューからの呼び出しですので、それは無いと思います。

以下が、コンテキストメニュー用htmです。宜しくお願いします。
<script type="text/javascript" language="javascript">
<!--
	var doc = external.menuArguments.document;
	// 行間を広げる
	doc.body.style.lineHeight="1.5em";
	// 以下省略

	// 以下が追加したい部分
	function AddDelBR(){
		alert("AddDelBR");
		// 処理コード
	}
	var rtn = doc.body.attachEvent("onclick",AddDelBR);
	alert(rtn);	//trueが返るが、イベントは発生せず

//  このようにベタ書きで追加しようともしましたが、やはりイベント発生せず
//  <BODY style="LINE-HEIGHT: 1.5em" onclick=alert() ・・>と変更にはなりますが
//  途中からの変更はIEが認識しない？
//	var obody = doc.getElementsByTagName("body")[0];
//	obody.setAttribute("onclick", "alert()");

//-->
</script>

5   名前： Pid ： 2006/07/22（土） 07:48  ID:c.mo6N/g
> 今回の改行を入れる件に関してはcontentEditableを切り替えることで対処しました。

なるほど，それは良いですね。ご報告ありがとうございます。


実はまだ MSIE が手元にないので確認してないのですが，

・body 要素内でクリックイベントが発生しているのは間違いないのですよね（キャンバスの大きさと body 要素ブロックの大きさは異なりますが）。

・doc.body.attachEvent ではなく doc.attachEvent だとどうでしょうか。IE の MouseEvent は，body 要素ではなくルート要素に登録しないと動作しなかった記憶がありますが（昔のコードが手元にないので記憶違いかもしれません）。
6   名前： Pid ： 2006/07/22（土） 07:48  ID:c.mo6N/g
あ，それから，

> obody.setAttribute("onclick", "alert()");

この書き方は保証外です。文書モデルとイベントモデルは，重なる部分もありますが，基本的に別物です（両者が混ざっている HTML がむしろ例外的……と言いたいけれどいろいろあるので略）。

obody.onclick = function () { alert ('OK'); }; ならば，JavaScript 1.0 時代からあります。
http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/guide/evnt.html#1009658
7   名前： Pid ： 2006/07/22（土） 07:48  ID:TDh0RvEz
>>5
> IE の MouseEvent は，body 要素ではなくルート要素に登録しないと動作しなかった記憶が

すみません，デマでした m(_ _)m。

いずれにせよ，こちらでは doc.attachEvent でも doc.body.attachEvent でもイベントが発生します。はてな。
8   名前： yoro ： 2006/07/22（土） 07:48  ID:UkbhveQ3
>>7
Pidさん、検証ありがとうございます。
> いずれにせよ，こちらでは doc.attachEvent でも doc.body.attachEvent でもイベントが発生します。はてな。
これは、どの環境でしたか？よろしかったら教えて下さい。

私のは、WinXP SP2 ,IE6　です。

あと、間違い訂正させて下さい。
>>4

//--> ← 頭の//は余分でした。これがあるとコンテキストメニューに出てこないはず。
</script>

時間の見ながら、色々試してみますので、解決できたら、また報告させていただきます。





9   名前： yoro ： 2006/07/22（土） 07:48  ID:UkbhveQ3
何を血迷ったか？！

以下は無かったことに　(^_^;)
//--> ← 頭の//は余分でした。これがあるとコンテキストメニューに出てこないはず。
</script>

10   名前： Pid ： 2006/07/22（土） 07:48  ID:GOE45W6U
ごめんなさい，私も何だか勘違いしてました。>>7 は撤回します m(_ _)m。

レジストリをいじるのが面倒なので，IE MenuExt（http://www.uryusoft.com/software/IEMenuExt/）で >>4 をコンテキストメニューに登録。

確かに attachEvent でも onclick でもイベントが発動しませんね。と言いますか，innerHTML/outerHTML を上書きしようとするとエラーになりますので，基本的に書き込み不可ではないでしょうか（しかし，それらしい記述をまだ MSDN 内で見つけていません）。

で，以下のようにすると，WinXP SP1 + IE6 ではイベント登録できました（SP2 は未確認）。

external.menuArguments.location.href = 'javascript:void(document.attachEvent ("onclick", function () { alert ("OK"); } ));';


これだとあまりにも回りくどいので，もっと良い方法ないし解説があると思います。
11   名前： yoro ： 2006/07/22（土） 07:48  ID:2Gelm.uR
Pidさん！　
すごい、私の環境(WinXP SP2)でもイベント発生させることができました。

このようなアプローチを考えつくPidさんはJavaScriptの生き字引ですね。

私も、過去ログなどを参考に少しでも研鑽できればと考えています。
感謝・感謝です。

でも、今のW3Cなど規格制定・改訂は大変ですよね。機能が色々増え各種ソフトウエアー
との連携が可能になっている現状では、環境の違いを含め無数のパターンが有るはずであり
それら殆ど全て上手く機能させ、かつウイルスなどに利用されないようにするには
考えてみるだけでも・・・ですね。

横道にそれますが、昨日IEから起動させているエクセルで一部マクロが機能しないことが
判りました。　Excel2003でしたが、Excel97で記載されている以下の現象でした。

http://support.microsoft.com/default.aspx?scid=kb%3Bja%3B160600
この資料は以下の製品について記述したものです。
&#8226; Microsoft Internet Explorer 3.01
&#8226; Microsoft Internet Explorer 3.0
&#8226; Microsoft Excel 97 Standard Edition
&#8226; Microsoft Visual Basic for Applications 1.0
↑随分昔のバージョンですね！

勉強会に配布するＣＤ用データで配布まで時間が無かったのでかなり焦りました。
一覧へ戻る