2

ボタンがクリックされたときに、テキスト入力でユーザーが選択したテキストを取得しようとしています。これは私がしようとしているものです:

<head>
    <script type="text/javascript">
        function GetSelectedText () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var range = window.getSelection ();                                        
                alert (range.toString ());
            } 
            else {
                if (document.selection.createRange) { // Internet Explorer
document.getElementById("foo").focus();
                    var range = document.selection.createRange();
                    alert (range.text);
                }
            }
        }
    </script>
</head>
<body>
    <button onclick="GetSelectedText ()">Get the selected text!</button>
    <input type = 'text' id = 'foo' />12345
</body>

を除くすべてのブラウザで期待どおりに動作しますIE9。ではIE9、12345チャンクからテキストを選択してボタンを押すと、選択したテキストに問題なく警告が表示されます。ただし、テキスト入力に何かを入力し、その一部を選択してボタンをクリックすると、空白のアラートが生成されます。

で動作させるにはどうすればよいIE9ですか？また、選択開始のカーソル位置を取得する方法はありますか (Mozilla のようなものselectionStart)? Rangy他の関連するjQueryライブラリを使用せずに、Javascriptソリューションを探しています..

4

3 に答える 3

2

テキスト入力とテキストエリアには、個別の選択 API、つまり入力自体のプロパティがありますselectionStart。selectionEndこれらは IE <= 8 ではサポートされていませんが、既に代替手段があります。

GetSelectedText()すべての主要なブラウザーで機能する関数の実装を次に示します。

デモ: http://jsfiddle.net/UK8gA/

コード：

function GetSelectedText() {
    var selectedText = "";
    var input = document.getElementById("foo");
    var sel, val = input.value;
    input.focus();
    if (typeof input.selectionStart == "number") {
        selectedText = val.slice(input.selectionStart, input.selectionEnd);
    } else if ( (sel = document.selection) && sel.createRange) { // IE
        var range = document.selection.createRange();
        selectedText = range.text;
    }
    alert(selectedText);
}
于 2013-02-25T22:54:19.403 に答える
0

「document.getElementById("foo").focus();」という行を除いて、すべて問題ないように見えます。必要ではないようであり、おそらくブラウザが強調表示されたテキストを検出できない理由です。それを削除して、何が得られるかを確認してください。

于 2013-02-25T20:18:39.247 に答える
0

jQuery Caret プラグインを見ることができます: jCaret

// Get start pos in intput box with id="box1"
$("#box1").caret().start

// Get end pos
$("#box1").caret().end

// Get selected text
$("#box1").caret().text
于 2013-02-25T20:10:02.870 に答える