Question

我有一个简单的HTML页面，我希望文本区域内的选定文本用于某些处理。我编写了jQuery代码，但我总是将空字符串作为选择。请帮我在我的代码中修复此问题。

HTML代码如下：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
</head>
<body>
    <form action="#" id="formfirst">
        <textarea name="tafirst" rows="10" id="tafirst">Along came Polly ---- Reality Bites ---- Duplex ---- Walter Mitty </textarea>
        <br>
        <input type="text" id="txtfirst">
        <br>
        <input type="submit">
    </form>
</body>
<script type="text/javascript" src="js/verify.js"></script>
</html>

Javascript代码如下：（verify.js）

function getSelectedText(){
    var t = '';
    if(window.getSelection){
        t = window.getSelection();
    }else if(document.getSelection){
        t = document.getSelection();
    }else if(document.selection){
        t = document.selection.createRange().text;
    }
    return t;
}

$(document).ready(function(){  
    //alert("HERE 1");
});
$(document).keypress(function(e){   
    if($('#tafirst').is(':focus')){
        if(e.altKey && e.which==97){
            alert(getSelectedText());
            e.preventDefault();
        }
    }
});

修改

我已下载rangy插件并将其放入我的js文件夹中。我在我的HTML中包含了该插件，如下所示：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="js/rangy/rangy-1.2.3/rangy-core.js"></script>
</head>
<body>
<form action="#" id="formfirst">
<textarea name="tafirst" rows="10" id="tafirst">Along came Polly ---- Reality Bites ---- Duplex ---- Walter Mitty </textarea>
<br>
<input type="text" id="txtfirst">
<br>
<input type="submit">
</form>
</body>
<script type="text/javascript" src="js/verify.js"></script>
</html>

对应的修改后的js文件如下：

var range = rangy.createRange();

$(document).ready(function(){  
    alert(range);
    alert("HERE 1");    
});
$(document).keypress(function(e){   
    if($('#tafirst').is(':focus')){
        if(e.altKey && e.which==97){
            alert(getSelectedText());
            e.preventDefault();
        }
    }
});

但它甚至没有显示任何警告信息。添加rangy的js参考时我做错了吗？

Answer 1

从textarea中获取所选文本需要使用不同的API来在大多数浏览器中获取页面主文本中的选定文本。您应该使用textarea的selectionStart和selectionEnd属性。此方法也适用于文本输入：

function getSelectedText(el) {
    var sel, range;
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        return el.value.slice(el.selectionStart, el.selectionEnd);
    } else if (
            (sel = document.selection) &&
            sel.type == "Text" &&
            (range = sel.createRange()).parentElement() == el) {
         return range.text;
    }
    return "";
}

示例：

function getSelectedText(el) {
  var sel, range;
  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    return el.value.slice(el.selectionStart, el.selectionEnd);
  } else if (
    (sel = document.selection) &&
    sel.type == "Text" &&
    (range = sel.createRange()).parentElement() == el) {
    return range.text;
  }
  return "";
}

window.onload = function() {
  document.getElementById("ta").onselect = function() {
    alert("Selected text: " + getSelectedText(this));
  };
};

<textarea id="ta" rows="5" cols="50">Please select some text in here</textarea>

使用jQuery在HTML页面上获取所选文本

1 个答案: