텍스트 영역에서 선택한 텍스트 얻기

선택한 텍스트를 변수에 저장 한 다음 단추를 눌러 선택한 텍스트를 삭제하고 싶습니다. 가급적 jquery와 함께하지만 기본 자바 스크립트를 신경 쓰지 않는다.텍스트 영역에서 선택한 텍스트 얻기

미리 감사드립니다.

UPDATE :

감사 조지, 당신이 내가 필요로 코드를 제거 가리키는 예를 시도했지만 나는 그것이 버튼의 클릭에 동작하지 않습니다. #addchapter를 textarea로 변경 한 경우에만 작동합니다. 어떤 아이디어가 내 코드에 문제가 있습니까? 감사.

<html> 
<head> 

    <script type="text/javascript" src="jquery-latest.pack.js"></script> 
    <script type="text/javascript" src="jquery-fieldselection.js"></script> 
    <script type="text/javascript"><!--//--><![CDATA[//><!-- 

     $(document).ready(function(){ 

      $('#addchapter').click(update);   
     }); 

     function update(e) { 

      var range = $(this).getSelection(); 

      $('#output').html(
       "selected text:\n<span class=\"txt\">" + ((true) ? range.text.whitespace() : range.text) + "</span>\n\n" 
      ); 
     } 


     String.prototype.whitespace = (function() { 

      if (!RegExp.escape) { 
       RegExp.escape = (function() { 
       var specials = [ '/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\' ]; 
       var sRE = new RegExp('(\\' + specials.join('|\\') + ')', 'g'); 
       return function(text) { return text.replace(sRE, '\\$1') } 
       })(); 

      } 

      var ws = { "\r\n": "¶", "\n": "¶", "\r": "¶", "\t": "&raquo;", " ": "&middot;" }; 

      return ($.browser.msie) ? function() { 

       var s = this; 
       $.each(ws, function(i){ s = s.replace(new RegExp(RegExp.escape(i), 'g'), this) }); 
       return s; 
      } : function() { 
       var s = this; 
       $.each(ws, function(i){ s = s.replace(new RegExp(RegExp.escape(i), 'g'), this + "\u200b") }); 
       return s; 
      } 

     })(); 


     //--><!]]> 

    </script> 

</head> 
<body> 

      <pre id="output"></pre> 

      <textarea id="area1" name="area1">textarea: foo bar baz</textarea> 

      <input type="button" value="add" id="addchapter"> 

</body> 
</html>

업데이트 2 :

이 사용하여 종료 - http://plugins.jquery.com/project/a-tools 나는이 질문은 당신이 찾고있는 무엇을 가지고 있다고 생각합니다

출처

2010-07-10 usertest

그냥 교육을 추측하지만 스크립트 블록의 끝 부분에 짝수 처리기를 연결해야한다고 생각합니다. IIRC에서 JavaScript는 외부 파일의 코드를 포함 할 때 전체 파일을 읽지 않고 해당 블록에서 읽혀지는대로 평가됩니다. 즉, $ (document) .ready (function() { $ ('# addchapter') 클릭 (업데이트); }); '스크립트 블록의 끝으로 이동하십시오. –

안녕하세요, 그냥 시도했지만 작동하지 않는 것 같습니다. – usertest

: How to get selected text in textarea?

편집 :

이 수도 또한 유용한 것으로 입증되었습니다. (그 질문에서 링크 됨) :

Understanding what goes on with textarea selection with JavaScript

출처

2010-07-10 23:31:27

안녕하세요, 나는 그것의 일부를 얻을 수 있지만 전부 작동하지, 내 질문의 업데이 트를 참조하십시오. 감사. – usertest

@ user201140 당신은 알 방법이 없었습니다. 그러나 나는 이미 그것을 조사하고있었습니다. 나는 그 질문이 첫 페이지에 쏟아져 나왔다는 것을 알았다. 귀하의 질문에 대한 내 의견을 참조하십시오. –

고마워, 내가 방금 지적한 것과 다른 플러그인을 발견했다. 똑같은 것을 근거로하고 있는지 잘 모르겠다. 내가 필요로하는 것을 예제로 잘라 버렸습니다 (버튼 포함). 그것의 여기 - http://plugins.jquery.com/project/a-tools – usertest

질문은 분명하지만 코드는 혼동을 일으킬 정도로 관련이 없으므로 코드 없이도 이해할 수 있습니다.

deleteSelectedText() 기능을 사용하면 삭제 한 텍스트를 제공하고 반환하는 <textarea> 또는 <input type="text">에서 선택한 텍스트가 삭제됩니다.

function getSelectionBoundary(el, start) { 
    var property = start ? "selectionStart" : "selectionEnd"; 
    var originalValue, textInputRange, precedingRange, pos, bookmark, isAtEnd; 

    if (typeof el[property] == "number") { 
     return el[property]; 
    } else if (document.selection && document.selection.createRange) { 
     el.focus(); 

     var range = document.selection.createRange(); 
     if (range) { 
      // Collapse the selected range if the selection is not a caret 
      if (document.selection.type == "Text") { 
       range.collapse(!!start); 
      } 

      originalValue = el.value; 
      textInputRange = el.createTextRange(); 
      precedingRange = el.createTextRange(); 
      pos = 0; 

      bookmark = range.getBookmark(); 
      textInputRange.moveToBookmark(bookmark); 

      if (/[\r\n]/.test(originalValue)) { 
       // Trickier case where input value contains line breaks 

       // Test whether the selection range is at the end of the 
       // text input by moving it on by one character and 
       // checking if it's still within the text input. 
       try { 
        range.move("character", 1); 
        isAtEnd = (range.parentElement() != el); 
       } catch (ex) { 
        log.warn("Error moving range", ex); 
        isAtEnd = true; 
       } 
       range.moveToBookmark(bookmark); 

       if (isAtEnd) { 
        pos = originalValue.length; 
       } else { 
        // Insert a character in the text input range and use 
        // that as a marker 
        textInputRange.text = " "; 
        precedingRange.setEndPoint("EndToStart", textInputRange); 
        pos = precedingRange.text.length - 1; 

        // Delete the inserted character 
        textInputRange.moveStart("character", -1); 
        textInputRange.text = ""; 
       } 
      } else { 
       // Easier case where input value contains no line breaks 
       precedingRange.setEndPoint("EndToStart", textInputRange); 
       pos = precedingRange.text.length; 
      } 
      return pos; 
     } 
    } 
    return 0; 
} 

function deleteSelectedText(el) { 
    var start = getSelectionBoundary(el, true); 
    var end = getSelectionBoundary(el, false); 
    var val = el.value; 
    var selectedText = val.slice(start, end); 
    el.value = val.slice(0, start) + val.slice(end); 
    return selectedText; 
}

출처

2010-07-11 22:44:05

텍스트 영역에서 선택한 텍스트 얻기

답변

관련 문제