- ベストアンサー
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）
- 専門家の回答
質問者が選んだベストアンサー
Eclipseはあまり詳しくありませんが、 少なくとも私のEclipse3.5で先のNo2のコードでエラーは出ません。 スクリプト・エクスプローラーで、javascriptプロジェクトの JavaScriptリソースに ECMAScriptビルトイン・ライブラリー と ECMA 3 ブラウザー・サポート・ライブラリー は表示されてますか？ プロジェクトを作る時に □ECMA3ブラウザーライブラリーのインクルード にチェックしましたか？
その他の回答 (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。
お礼
残念ながら、この問題につきましては解決出来なかった為、 今後、何か別の手段を検討することに致しました。 いろいろとアドバイスをありがとうございました。
補足
「yyr446」様 アドバイスを多数ご回答いただきまして、 本当にありがとうございます。 本日（20100816(月)）から通常勤務に戻りましたので、 さっそく開発環境内を確認したところ、 Eclipse3.5のプロジェクトエクスプローラ内の、 「JavaScript Resources」フォルダ以下に、 「ECMA 3 ブラウザー・サポート・ライブラリー」は表示されていました。 それと、 「ECMAScriptビルトイン・ライブラリー」につきましては、 「ECMAScript Built-In Library」として表示されては おりましたが、中を見たところ、 Rangeという文字列が存在しているクラスとメソッドは、 ともに、「RangeError」しか表示されておりませんでした。 もしかすると、この 「ECMAScript Built-In Library」というのが古くて、 必要なクラスやメソッドが入っていないのが、 今回の問題点なのでしょうか？ もしそうでしたら、このライブラリを 最新版に更新する方法などがございましたら、 ぜひ教えてください。 それと、 「プロジェクトを作る時に □ECMA3ブラウザーライブラリーのインクルード にチェックしましたか？」 につきましては、前任者が数年前にプロジェクトを作ったものを 引き継いでおりましたので、 私の方では、この点につきましては不明という状態です。 以上になります。 宜しくお願い致します。 hiroasa21。