4

なぜこのコードが機能しないのか、少し混乱しています！

HTMLマークアップ：

<div id="diva"><b>Score</b> some <i>goals</i></div>
<div id="soda"></div>

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
        var range = document.selection.createRange ();
        alert (range.text);
    }
}
}

var butn = document.getElementById("soda");
butn.onclick = function(){
    GetSelectedText();
}
4

3 に答える 3

10

発生している可能性のある問題の1つは、一部のブラウザー（特にIE）では、ボタンのclickイベントが発生するまでに、選択範囲が破棄されていることです。これを修正するには、mousedown代わりにイベントを使用するか（これにより、選択を破棄できますが、イベントが処理された後でのみ）、ボタンを選択不可にすることができます。

この動作は通常の要素でのみ発生するため、ボタンは実際のボタン入力ではないと思います。

デモ： http： //jsfiddle.net/L9bvU/1/

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
            var range = document.selection.createRange ();
            alert (range.text);
        }
    }
}
span {
    background-color: #ccc;
    padding: 3px;
    border: solid gray 1px;
    
}

*[unselectable="on"] {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
<div contenteditable="true">Please select some of this text and press a button below</div>

<span onclick="GetSelectedText()">Click</span>
<span onmousedown="GetSelectedText()">Mousedown</span>
<span unselectable="on" onclick="GetSelectedText()">Click, unselectable</span>

于 2013-01-28T00:16:43.167 に答える
4 
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection();
    } 
    if (window.document.getSelection) {
        return window.document.getSelection();
    } 
    if (window.document.selection) {
        return window.document.selection.createRange().text;
    }
    return "";  
}

<p onmouseup="getSelectedText(); alert(txt)">
Highlight some of this text
with the mouse select press button end release
to fire the event. </p>


これが私のやり方です。テキスト終了アラートテキストなどを選択するだけです。
OnMouse（event）がhtmlのドキュメント全体にどのように設定されているかを知っている人はいますか？HTMLページに直接追加する必要はありません。
反対側にいるのは、firebugの要素を変更できるからです。>-例

于 2014-02-20T15:59:01.007 に答える
1

上記のコードには2つの問題があります。-あなたはそれを保証することはできません

var butn = document.getElementById("soda");

ドキュメントの読み込みが完了する前に実行される可能性があるため、機能します

-ボタンではない別の要素をクリックすると、選択が失われます。「soda」divをに変更すると、次のように機能します。

<div id="diva"><b>Score</b> some <i>goals</i></div>
<div id="soda" onclick="GetSelectedText()">This will NOT work</div>
<input type="button" onclick="GetSelectedText()" value="This will work"/>

ただし、ここにいる他の人がアドバイスしているように、jQueryを確認することを強くお勧めします。それはあなたのようにずっと簡単になります！

于 2013-01-28T00:25:38.127 に答える