IE8でdivのcontenteditable=trueでの擬似テキス

解決済

質問者：hiroasa21
質問日時：2010/08/10 16:37
回答数：4件

IE8でdivのcontenteditable=trueでの擬似テキストボックス内から、
キャレット位置を取得しようとして、
Eclipse3.5上から、以下のJavaScript文を入力していたところ、

var elem = document.getElementById("chaTitleName2");
elem.focus();
var range = document.selection.createRange();

「関数 createRange() は未定義です」というエラーが出ます。
このエラーを解消する方法を、ご存知の方がいらっしゃいましたら、
ぜひ教えてください。
（もしくは、他の方法で、
　IE8でdivのcontenteditable=trueでの擬似テキストボックス内から、
　キャレット位置を取得する方法をご存知の方がいらっしゃいましたら、
　ぜひ教えてください）

お世話になります。
宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： yyr446
回答日時：2010/08/12 16:11

Eclipseはあまり詳しくありませんが、

少なくとも私のEclipse3.5で先のNo2のコードでエラーは出ません。

スクリプト・エクスプローラーで、javascriptプロジェクトの
JavaScriptリソースに
　ECMAScriptビルトイン・ライブラリー　と
　ECMA 3 ブラウザー・サポート・ライブラリー
は表示されてますか？

　プロジェクトを作る時に
　　□ECMA3ブラウザーライブラリーのインクルード
　にチェックしましたか？

この回答への補足

「yyr446」様

アドバイスを多数ご回答いただきまして、
本当にありがとうございます。

本日（20100816(月)）から通常勤務に戻りましたので、
さっそく開発環境内を確認したところ、
Eclipse3.5のプロジェクトエクスプローラ内の、
「JavaScript Resources」フォルダ以下に、
「ECMA 3 ブラウザー・サポート・ライブラリー」は表示されていました。
それと、
「ECMAScriptビルトイン・ライブラリー」につきましては、
「ECMAScript Built-In Library」として表示されては
おりましたが、中を見たところ、
Rangeという文字列が存在しているクラスとメソッドは、
ともに、「RangeError」しか表示されておりませんでした。

もしかすると、この
「ECMAScript Built-In Library」というのが古くて、
必要なクラスやメソッドが入っていないのが、
今回の問題点なのでしょうか？
もしそうでしたら、このライブラリを
最新版に更新する方法などがございましたら、
ぜひ教えてください。

それと、
「プロジェクトを作る時に
　　□ECMA3ブラウザーライブラリーのインクルード
　にチェックしましたか？」
につきましては、前任者が数年前にプロジェクトを作ったものを
引き継いでおりましたので、
私の方では、この点につきましては不明という状態です。

以上になります。
宜しくお願い致します。

hiroasa21。

補足日時：2010/08/16 11:17

通報する

- 0
- 件

通報する

この回答へのお礼

残念ながら、この問題につきましては解決出来なかった為、
今後、何か別の手段を検討することに致しました。
いろいろとアドバイスをありがとうございました。

通報する

お礼日時：2010/08/25 23:37

No.3

回答者： yyr446
回答日時：2010/08/11 20:41

もしや

「「関数 createRange() は未定義です」というエラーが出ます。
このエラーを解消する方法」

って、Galileo(Eclipse)のIDEの中で、エラーが出るのを防ぐってことかしら？

この回答への補足

「yyr446」様へ

お世話になります。
何が原因かは不明ですが、Eclipse3.5上で、
「「関数 createRange() は未定義です」というエラー
　が出ていて、その先の開発作業へ進めない状況の為、
「エラーが出ないように改善したい」という意味でした。
わかりずらい表現ですみませんでした。

このエラーを解消するにあたって、
何かお心当たりの点などございましたら、
ぜひアドバイス願います。
宜しくお願い致します。

hiroasa21。

補足日時：2010/08/11 23:58

通報する

- 0
- 件

通報する

この回答へのお礼

通報する

お礼日時：2010/08/25 23:41

No.2

回答者： yyr446
回答日時：2010/08/11 20:35

こおいうので、どうですか

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。

補足日時：2010/08/11 23:51

通報する

- 0
- 件

通報する

この回答へのお礼

通報する

お礼日時：2010/08/25 23:42

No.1

回答者： yamada_g
回答日時：2010/08/11 18:44

自分の環境も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。