텍스트 영역 내에서 선택한 텍스트를 일부 처리에 사용하려는 간단한 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>
자바 스크립트 코드는 다음과 같습니다 : (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 참조를 추가하는 동안 내가 잘못한 것이 있습니까?
텍스트 영역에서 선택한 텍스트를 가져 오려면 대부분의 브라우저에서 페이지의 기본 텍스트에서 선택한 텍스트를 가져 오는 것과 다른 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다