jquery에서 마지막으로 붙여 넣은 텍스트를 가져 오는 방법은 무엇입니까?

Question

사용자가 텍스트를 쓰거나 붙여 넣을 때 필드의 텍스트를 자르려면 다음 코드는 훌륭하지만 한 가지 문제가 있습니다. 사용자가 붙여 넣은 텍스트로 바꾸거나 모든 텍스트를 바꿀 텍스트를 선택하면 커서를 붙여 넣어 텍스트를 삽입하면 코드는 현재 값 + 끝에있는 새 값을 반복합니다. 어떻게 해결할 수 있습니까?

$(document).on('paste', "input[type='text'], textarea", function(e) { 

      let val = $(this).val();    
      val = val.trim(); 
      val = val.replace(/(?:^\s+|\s+?(\s))(\S+)/g, "$1$2"); 
       val = val.replace(/\s+(\s)$/, "$1"); 
      $(this).val(val); 

    }); 

내가 무엇을 내가해야 할 것은 그것을 일반적으로 붙여 최종 붙여 넣은 텍스트를 얻을 트림하는 것입니다 생각하지만, 그 최종 붙여 넣은 텍스트를 얻는 방법 질문은? 도울 수 있니?

Answer 1

, 붙여 넣기 이벤트가 파이프 라인 아니라고 즉석에서 붙여 넣기 텍스트를 변경할 수 있습니다. 클립 보드에 액세스 할 수 있지만 데이터를 가져 오는 것은 붙여 넣기 이벤트뿐만 아니라 상기 이벤트 내의 clipboardData에 대해서 questionable browser support이기 때문에 조금 어렵습니다.

이 사용자가 자신의 가치 붙여 후에도 값을 업데이트 할 수있는 좋은 시간으로의 onChange 또는 및 onblur, 당신의 최상의 선택입니다

$("input[type='text'], textarea").bind('blur', function(e) { 
     $(this).val($.trim($(this).val())); 
}); 

이 그들이 공백을 입력 여부, 작동 또는 붙여 넣기합니다은 붙여 넣기가 필요한 경우 위와 붙여 넣기 이벤트가 필요하지만 붙여 넣기 이벤트는 "valueIsPasted"와 같은 공유 부울을 true로 설정하고 위의 작업 만 수행 할 수 있습니다 그 값이 참일 때. 나는 그 해결책을 좋아하지 않지만 유감스럽게도, 붙여 넣기 지원은 그리 좋지 않습니다. 그 위에, 붙여 넣기 이벤트를 지원하지 않는 IE에서는 여전히 작동하지 않습니다.

업데이트 :

브라우저 지원에 W3Schools begs to differ 것 같은데; 그러나 나는 여전히 onChange 또는 onBlur가 사용자가 값 편집을 끝내거나 컨트롤을 사용하고 작업을 완료 한 후에 값을 변경할 수 있으므로 최상의 선택이라고 생각합니다. 내 codepen을 확인하십시오.

Answer 2

문제는 트림 코드가 먼저 실행되고 (데이터의 사본 한 개가 요소에 배치 됨) 붙여 넣기가 두 번째로 발생한다는 것입니다 (마지막에 두 번째 데이터 사본이 생성됨). 우리가 트림 코드를 지연하는 경우

, 문제는 아주 간단하게 해결 :

$("#txtInput, textarea").on('paste', function(e) { 
 
    // Store the invocation context (the input element) 
 
    // because it will change in the setTimeout 
 
    var ctx = this; 
 

 
    // Wait 1/10th of a second before trimming the data 
 
    // This will allow the paste to complete normally. 
 
    setTimeout(function(){ 
 
    $(ctx).val($(ctx).val().trim());    
 
    }, 100); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="txtInput" size="40" value=" there are leading and trailing spaces here "> 
 
<textarea></textarea>

한마디로