나는 현재 내가에 붙여 넣기 된 텍스트에 대한 제어를 필요로하는 텍스트 영역, <p></p>은 본질적으로 나는 사용자가 텍스트 영역에 붙여 배치하고 싶은대로 수행 할 수 있어야이 텍스트 영역

Question

에서 자바 스크립트 캐치 붙여 넣기 이벤트 변수로 변환합니다.

나는 다음 텍스트 그게 전부와 최종 협상에서 그런

내 자신의 변수에 그들이 텍스트와 텍스트 영역에서 제거 할 문자열의 크기를 붙여있는 위치를 밖으로 작동합니다 방법.

내 질문 : 방금 사용자가 붙여 넣은 변수에 텍스트 복사본을 가져 오려면 어떻게해야합니까?

감사합니다.

Answer 1

--Dave

나는 며칠 전에 비슷한 질문에 대답 : Detect pasted text with ctrl+v or right click -> paste. 이번에는 IE에서 텍스트 영역의 선택 영역 경계를 정확하게 가져 오는 긴 함수를 포함 시켰습니다. 나머지는 상대적으로 간단합니다.

대부분의 브라우저에서 붙여 넣기 이벤트를 사용할 수 있습니다 (특히 Firefox 2는 아님). 붙여 넣기 이벤트를 처리 할 때 현재 선택 사항을 기록한 다음 붙여 넣기가 완료된 후 함수를 호출하는 간단한 타이머를 설정하십시오. 이 함수는 길이를 비교하여 붙여 넣은 컨텐트를 찾을 위치를 알 수 있습니다. 다음과 같은 뭔가 :

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 getTextAreaSelection(textarea) { 
    var start = getSelectionBoundary(textarea, true), 
     end = getSelectionBoundary(textarea, false); 

    return { 
     start: start, 
     end: end, 
     length: end - start, 
     text: textarea.value.slice(start, end) 
    }; 
} 

function detectPaste(textarea, callback) { 
    textarea.onpaste = function() { 
     var sel = getTextAreaSelection(textarea); 
     var initialLength = textarea.value.length; 
     window.setTimeout(function() { 
      var val = textarea.value; 
      var pastedTextLength = val.length - (initialLength - sel.length); 
      var end = sel.start + pastedTextLength; 
      callback({ 
       start: sel.start, 
       end: end, 
       length: pastedTextLength, 
       text: val.slice(sel.start, end), 
       replacedText: sel.text 
      }); 
     }, 1); 
    }; 
} 

window.onload = function() { 
    var textarea = document.getElementById("your_textarea"); 
    detectPaste(textarea, function(pasteInfo) { 
     var val = textarea.value; 

     // Delete the pasted text and restore any previously selected text 
     textarea.value = val.slice(0, pasteInfo.start) + 
      pasteInfo.replacedText + val.slice(pasteInfo.end); 

     alert(pasteInfo.text); 
    }); 
}; 

Answer 2

빠른 검색은 다른 브라우저에 대해 다른 방법이 있음을 보여줍니다. jQuery에 해결책이 있는지 확실하지 않습니다. Prototype.js에는 Prototype.js가없는 것으로 보입니다. 어쩌면 유이가 당신을 위해 할 수 있을까요?

수많은 이벤트 트리거가 있기 때문에 TinyMCE를 사용할 수도 있습니다. 완전한 워드 프로세서이지만 원하는 경우 일반 텍스트로 사용할 수 있습니다. 그것은 비록 조금 더 많은 무게를 추가 할 수 있습니다. 예를 들어, 시작시, 귀하의 <textarea>을 여러 서브와 함께 iFrame으로 바꿉니다. 그러나 그것은 당신이 요구하는 것을 할 것입니다.

Answer 3

이제 대신 FilteredPaste.js (http://willemmulder.github.com/FilteredPaste.js/)를 사용할 수 있습니다. 텍스트 영역이나 contenteditable에 붙여 넣을 내용을 제어 할 수 있으며 원하는대로 내용을 필터링/변경/추출 할 수 있습니다.