- ベストアンサー
IE8でdivのcontenteditable=trueでの擬似テキストボックス内からキャレット位置を取得する方法
- IE8でdivのcontenteditable=trueでの擬似テキストボックス内からキャレット位置を取得しようとした際に、関数createRange()は未定義というエラーが発生します。このエラーを解消する方法について教えてください。
- IE8のdiv要素でcontenteditable属性をtrueに設定した擬似テキストボックス内からキャレットの位置を取得するために、以下のJavaScript文を使用していますが、関数createRange()が未定義のエラーが出ています。このエラーを解消するにはどうすればよいでしょうか。
- IE8のdiv要素でcontenteditable属性をtrueに設定した場合、キャレットの位置を取得するためにはcreateRange()関数を使用しますが、この関数が未定義のエラーとなっています。どのように解消すればよいでしょうか。
- hiroasa21
- お礼率97% (88/90)
- JavaScript
- 回答数4
- ありがとう数8
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- yyr446
- ベストアンサー率65% (870/1330)
もしや 「「関数 createRange() は未定義です」というエラーが出ます。 このエラーを解消する方法」 って、Galileo(Eclipse)のIDEの中で、エラーが出るのを防ぐってことかしら？
お礼
残念ながら、この問題につきましては解決出来なかった為、 今後、何か別の手段を検討することに致しました。 いろいろとアドバイスをありがとうございました。
補足
「yyr446」様へ お世話になります。 何が原因かは不明ですが、Eclipse3.5上で、 「「関数 createRange() は未定義です」というエラー が出ていて、その先の開発作業へ進めない状況の為、 「エラーが出ないように改善したい」という意味でした。 わかりずらい表現ですみませんでした。 このエラーを解消するにあたって、 何かお心当たりの点などございましたら、 ぜひアドバイス願います。 宜しくお願い致します。 hiroasa21。
- yyr446
- ベストアンサー率65% (870/1330)
こおいうので、どうですか IEでもIE以外でもいけそうですが... （全角空白は半角空白にしてね） <div id='chatitlename2' contenteditable=true>ああああいいいいうううう</div> <button onclick="getcaret();" >ボタン</button> <script type="text/javascript"> function getcaret() { var elem = document.getElementById("chatitlename2"); elem.focus(); var range,start_point,end_point; if('undefined' !== typeof document.selection){ range = document.selection.createRange(); var stored_range = range.duplicate(); stored_range.moveToElementText(elem); stored_range.setEndPoint('EndToEnd',range); elem.selectionStart = stored_range.text.length - range.text.length; elem.selectionEnd = elem.selectionStart + range.text.length;; start_point = elem.selectionStart; end_point = elem.selectionEnd; }else{ var selection = window.getSelection(); range = document.createRange(); range.setStart(elem.firstChild,selection.anchorOffset); range.setEnd(elem.firstChild,selection.focusOffset); start_point = range.startOffset; end_point = range.endOffset; } alert('開始位置' + start_point); alert('終了位置' + end_point); } </script>
お礼
残念ながら、この問題につきましては解決出来なかった為、 今後、何か別の手段を検討することに致しました。 いろいろとアドバイスをありがとうございました。
補足
「yyr446」様、ご回答ありがとうございます。 さっそく試したいところなのですが、 ちょうど明日（2010年8月12日（木））から 会社が夏季休暇に入ってしまって開発環境に アクセス出来ない状況の為、 来週出勤してから、さっそく試してみます。 それまで、しばらくレスポンスをお待ちいただけ ればと存じます。 私はJavaScriptやHTML5の初心者なので、 よく存じないのですが、 range = document.selection.createRange(); を、Eclipse3.5上で手入力した段階で、 「createRange()関数が未定義です」エラーが出てしまい、 その先へ進めない状況です。 来週、私が試した後にでも、もしよろしかったら、 何かお心当たりの点などございましたら、 ぜひアドバイス願います。 よろしくお願い致します。 hiroasa21。
- yamada_g
- ベストアンサー率68% (258/374)
自分の環境もIE8ですがエラーにならずにちゃんと動きました。 <html> <head> <script type="text/javascript"> function test() { var elem = document.getElementById("chatitlename2"); elem.focus(); var range = document.selection.createRange(); alert(range); } </script> </head> <body> <div id='chatitlename2' contenteditable=true> </div> <button onclick="test();" >ボタン</button> </body> その他の環境の違いによる影響なのでしょうか。 ちなみの当方の環境は IE：8.0.6001.18702 OS：WindowsXP Professional SP3 です。
お礼
残念ながら、この件につきましては解決致しませんでしたので、 別の技術に仕様を変更することに致しました。 いろいろとアドバイスをいただきまして、 本当にありがとうございました。
補足
「yamada_g」様、ご回答ありがとうございます。 参考までに、私の環境（IE8、WindowsXP Professional SP3）も下記致します。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" errorPage="../error/FormSystemError.jsp" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ｘｘシステム</title> <link rel="stylesheet" type="text/css" href="./style.css"> <script language="JavaScript"> <!-- 上記のような環境になっております。 もし、何かお気づきの点などございましたら、 ぜひアドバイス願います。 宜しくお願い致します。 hiroasa21。
関連するQ&A
- お世話になります。contenteditable=trueで、
お世話になります。contenteditable=trueで、 （IE8上にて、divでの擬似テキストボックス） JavaScript上からテキストデータとして、 「Q&A」という文字列を、innerHTMLでセットしたところ、 「Q」までは、文字列が画面上にセットされるのですが、 その先の「&A」がセットされません。 （画面上からも入力出来ません） どのような方法でセットすれば、 「Q&A」という文字列をセットすることが可能になるのでしょうか？ （JavaScript上からのinnerHTML、および画面上からの手入力時） 以上になります。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- お世話になります。「質問番号：6100202」と並行して、別の質問をさ
お世話になります。「質問番号：6100202」と並行して、別の質問をさせていただきます。 宜しくお願い致します。 IE8でdivのcontenteditable=trueでの擬似テキストボックス内と、通常テキストエリア内へ それぞれ任意の文字列を手入力した後で、 入力チェックエラーとして、別のページ画面（エラーメッセージ）を表示させて、 その画面上の[戻る]ボタンをクリックして、 元のページ画面へ戻すプログラムを作成して動かしてみたところ、 通常テキストエリア内へ任意の文字列を手入力した方は、 その任意の文字列の内容のままで残って正しく表示されましたが、 IE8でdivのcontenteditable=trueでの擬似テキストボックス内へ 任意の文字列を手入力した方は、 任意の文字列内容は無くなっていて、 その元のページ画面を、一番最初に開いた際の初期値（文字列）が表示されてしまいました。 そこでご質問内容ですが、 別のページ画面から、元のページ画面に戻った際に、 IE8でdivのcontenteditable=trueでの擬似テキストボックス内へ 任意の文字列を手入力した値を、キープして、 その任意の文字列の内容のまま残すには、 どのような方法がよいのでしょうか？
- ベストアンサー
- JavaScript
- div要素内の全input要素をdisable
Javascriｐｔで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を すべてdisableにしたいです。 以下でうまくいきません。どなたかお知恵を頂けないでしょうか？ よろしくお願い致します。 var input_tags = document.getElementById("div_id").getElementsByTagName("input"); for(var input_tag in input_tags) { input_tag.disabled = true; }
- ベストアンサー
- JavaScript
- Safari find()で次のテキストを検索、Firefox find()で最初から検索
Safariのfind()についてです。 Firefoxのfind()は、キャレットやフォーカスの位置から検索を開始し、 find()で見付かるとフォーカスを移動させますが、 Safariでは常にドキュメントの最初から検索します。 これを次々と検索していく方法はあるでしょうか。 <body> test test </body> <script> var word='test'; var cnt=0; while(find(word)){ //Safariでは無限ループになる cnt++; } alert(''+cnt); </script> これはmatchなどでも作れますが、BBS投稿用のサンプルですので、 find()を使った方法を探しています。 また、Firefoxのfind()で、最初から検索し直す方法も探していますが、 現在は while(find(word,false,true)) ; で、ドキュメントの最初まで検索していき、あらためて検索をし直す、という方法を採っています。 これを、一発で最初に戻すような方法はないでしょうか。 var sel=document.createRange(); sel.collapse(document.body, true); var sel=document.createRange(); sel.setStart(document.body, 0); sel.setEnd(document.body, 0); これらではfind()が最初から検索しなおすことはありませんでした。
- ベストアンサー
- JavaScript
- DIVタグでの擬似インラインフレーム
<DIV>タグで擬似インラインフレームを実現させようと思っています。 <DIV>タグ内に<table>タグがあって、<td>タグ内に<A>タグテキストリンクがある場合に、そのリンクを右クリックしてプロパティを表示させると、 <DIV>タグの位置がずれてしまいます。 ・動作テスト OS：WindowsXP SP１ ブラウザ：IE6 ・テキストリンク<a>タグを右クリックしてプロパティを表示させたときのみ発生する。 ・NN7.1では発生しません。 原因がまったくわかりません。 簡単な例↓ <DIV style="width:640px;height:350px;overflow:scroll;"> <table width=620px><tr><td><A href=http://www.yahoo.co.jp>YAHOO</A></td></tr></table> </DIV> 以上のような感じです。 しかし、実際に操作していただくと、何が問題なのかがわかると思いますので、以下のページを参照してください。 http://members3.jcom.home.ne.jp/takokko/divframetest.html 大変困っております。なにとぞ、宜しくお願いいたします。
- ベストアンサー
- HTML
- 疑似インラインフレームを中央に配置する方法
疑似インラインフレームを中央に配置する方法 疑似インラインフレームを画面中央に配置する方法を教えてください。 ちなみに、以下のような記述を試してみたのですが…。 【css】 body { text-align: center; margin-top: 100px; color: #555555; font-size: 10px; font-family: "ＭＳ Ｐゴシック"; } *{ margin:0px; border:0px; padding:0px; line-height:100%; } .box{ text-align: center; padding-bottom: 50px; } .box_scroll{ text-align: center; width: 300px; height: 200px; padding: 10px 10px; overflow: auto; } 【xhtml】 <div class="box"> <img src="img.jpg" width="100" height="50" alt="img" /> </div> <div class="box"> <div class="box_scroll"> ---文章--- </div> </div> 初めの<div class="box">は中央に配置されるのですが、疑似インラインの部分は左に寄ってしまいます。 他にも他の方の質問を参考に試してみたのですが、初心者の為いまいちよくわからず、うまくいきませんでした。 どうか回答よろしくお願いいたします。
- ベストアンサー
- HTML
- C# htmlの一部の文字取得
C#のwebBrowserで表示されているtextを表示させたいです。 htmlが <div class="ＡＡＡ"> ＢＢＢ </div> となっており、ＢＢＢのtextを取得したい場合、 HtmlElementCollection elem = webBrowser0.Document.GetElementsByTagName("div"); foreach (HtmlElement element in elem) { if (element.GetAttribute("class") == "ＡＡＡ") { str = element.InnerText; } } と、しましたが、上手く取得出来ません。 ご教授頂ければ助かります。
- 締切済み
- C・C++・C#
- IE6だけの判定、IE7だけの判定について
こんにちは。 下記の「IE6だけの判定方法（JavaScript）」で、どれが一番いいのか、 或は、もっと正確で簡素な良い方法があるのかどうかを教えてください。 また、IE7だけの判定方法も記載しますので、ご指導お願いします。 色々試した結果は、一応全部ＯＫでした。 ただ、プログラマーでないので心配なので質問させて頂きました。 もうひとつ、!!は何かundefinedやfunctionを、true、falseへと整形してるようですが、 これを、業界用語で何って言うのかも、教えてください。よろしくお願いします。 <script> /* IE6だけの判定方法 */ // (1) var ua = navigator.userAgent.toLowerCase(); var bver = (ua.match(/.+(?:rv|webkit|khtml|opera|msie)[\/: ]([\d.]+)/ ) || [0,'0'])[1]; var isIE6a = (/msie/.test(ua) && !/opera/.test(ua) && parseInt(bver) < 7 && (!window.XMLHttpRequest || typeof(XMLHttpRequest) === 'function')); if (isIE6a) document.write('IE6'); // (2) var isIE6b = document.uniqueID && document.compatMode && !window.XMLHttpRequest && document.execCommand; if (!!isIE6b) document.write('IE6'); // (3) var isIE6c = /msie|MSIE 6/.test(navigator.userAgent); if (isIE6c) document.write('IE6'); /* IE7だけの判定方法 */ var isIE7 = window.XMLHttpRequest && (/*@cc_on!@*/false) && !(document.documentMode >=8); if (!!isIE7) document.write('IE7'); </script>
- ベストアンサー
- JavaScript
- div要素を滑らかに動かしたい
<div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか？ setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }
- ベストアンサー
- JavaScript
- innerHTMLに代入したインラインフレームのＤＩＶの値の取得について
下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>
- 締切済み
- JavaScript
お礼
残念ながら、この問題につきましては解決出来なかった為、 今後、何か別の手段を検討することに致しました。 いろいろとアドバイスをありがとうございました。
補足
「yyr446」様 アドバイスを多数ご回答いただきまして、 本当にありがとうございます。 本日（20100816(月)）から通常勤務に戻りましたので、 さっそく開発環境内を確認したところ、 Eclipse3.5のプロジェクトエクスプローラ内の、 「JavaScript Resources」フォルダ以下に、 「ECMA 3 ブラウザー・サポート・ライブラリー」は表示されていました。 それと、 「ECMAScriptビルトイン・ライブラリー」につきましては、 「ECMAScript Built-In Library」として表示されては おりましたが、中を見たところ、 Rangeという文字列が存在しているクラスとメソッドは、 ともに、「RangeError」しか表示されておりませんでした。 もしかすると、この 「ECMAScript Built-In Library」というのが古くて、 必要なクラスやメソッドが入っていないのが、 今回の問題点なのでしょうか？ もしそうでしたら、このライブラリを 最新版に更新する方法などがございましたら、 ぜひ教えてください。 それと、 「プロジェクトを作る時に □ECMA3ブラウザーライブラリーのインクルード にチェックしましたか？」 につきましては、前任者が数年前にプロジェクトを作ったものを 引き継いでおりましたので、 私の方では、この点につきましては不明という状態です。 以上になります。 宜しくお願い致します。 hiroasa21。