我有一个简单的 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();
}
}
});
编辑
我已经下载了 rangey 插件并将其放入我的 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 引用时做错了什么吗？
最佳答案
从文本区域获取选定的文本需要与大多数浏览器中获取页面主文本中的选定文本不同的 API。您应该使用文本区域的 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>关于javascript - 使用 jQuery 获取 HTML 页面上选定的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25907234/