캐치 페이스트 입력

브라우저에 붙여 넣은 입력을 살균하는 방법을 찾고 있는데, 이것이 jQuery와 관련이 있습니까?

나는 지금까지 이것을 생각해 냈습니다.

$(this).live(pasteEventName, function(e) {
 // this is where i would like to sanitize my input
 return false;
}

불행히도이 "사소한"문제로 인해 개발이 크게 진행되었습니다. 누군가가 올바른 방향으로 나를 가리킬 수 있다면 나는 정말로 행복한 캠프로 만들 것입니다.

좋아, 그냥 같은 문제에 부딪쳤다. 나는 먼 길을 갔다

$('input').on('paste', function () {
  var element = this;
  setTimeout(function () {
    var text = $(element).val();
    // do something with text
  }, 100);
});

.val () func이 채워질 때까지 작은 시간 초과.

이자형.

실제로 이벤트 에서 바로 값을 가져올 수 있습니다 . 그래도 도착하는 방법이 조금 모호합니다.

통과하지 않으려면 false를 반환하십시오.

$(this).on('paste', function(e) {

  var pasteData = e.originalEvent.clipboardData.getData('text')

});

크로스 플랫폼 호환성을 위해서는 입력 및 속성 변경 이벤트를 처리해야합니다.

$ (something).bind ("input propertychange", function (e) {
    // check for paste as in example above and
    // do something
})

다음 코드를 사용하여 문제를 해결했습니다.

$("#editor").live('input paste',function(e){
    if(e.target.id == 'editor') {
        $('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

이제 캐럿 위치를 저장하고 해당 위치에 추가하면 모든 설정이 완료됩니다.

흠 ... 붙여 넣는 데이터를 잡는 데 사용할 수 있다고 생각 합니다 e.clipboardData. 팬 아웃되지 않으면 여기를 살펴 보십시오 .

$(this).live("paste", function(e) {
    alert(e.clipboardData); // [object Clipboard]
});

붙여 넣기 이벤트를 수신하고 키업 이벤트 리스너를 설정하십시오. 키업시 값을 캡처하고 키업 이벤트 리스너를 제거하십시오.

$('.inputTextArea').bind('paste', function (e){
    $(e.target).keyup(getInput);
});
function getInput(e){
    var inputText = $(e.target).val();
    $(e.target).unbind('keyup');
}

$("#textboxid").on('input propertychange', function () {
    //perform operation
        });

잘 작동합니다.

이것은 당신이 원하는 것에 더 가까워지고 있습니다.

function sanitize(s) {
  return s.replace(/\bfoo\b/g, "~"); 
};

$(function() {
 $(":text, textarea").bind("input paste", function(e) {
   try {
     clipboardData.setData("text",
       sanitize(clipboardData.getData("text"))
     );
   } catch (e) {
     $(this).val( sanitize( $(this).val() ) );
   }
 });
});

clipboardData 객체가 발견되지 않으면 (IE 이외의 브라우저에서) 현재 요소의 전체 값 + 클립 보드의 값을 얻습니다.

실제로 데이터가 실제로 요소에 붙여 넣은 후에 만 ​​있다면 입력 전후에 두 값을 나누기 위해 추가 단계를 수행 할 수 있습니다.

 $('').bind('input propertychange', function() {....});                      

이것은 마우스 붙여 넣기 이벤트에서 작동합니다.

필드의 원래 값과 필드의 변경된 값을 비교하고 붙여 넣은 값으로 차이를 빼는 것은 어떻습니까? 필드에 기존 텍스트가 있어도 붙여 넣은 텍스트를 올바르게 잡습니다.

http://jsfiddle.net/6b7sK/

function text_diff(first, second) {
    var start = 0;
    while (start < first.length && first[start] == second[start]) {
        ++start;
    }
    var end = 0;
    while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) {
        ++end;
    }
    end = second.length - end;
    return second.substr(start, end - start);
}
$('textarea').bind('paste', function () {
    var self = $(this);
    var orig = self.val();
    setTimeout(function () {
        var pasted = text_diff(orig, $(self).val());
        console.log(pasted);
    });
});

이 코드는 오른쪽 클릭으로 붙여 넣기 또는 직접 복사 붙여 넣기를 위해 작동합니다.

   $('.textbox').on('paste input propertychange', function (e) {
        $(this).val( $(this).val().replace(/[^0-9.]/g, '') );
    })

내가 붙여 넣을 때 Section 1: Labour Cost이됩니다 1텍스트 상자에.

float 값만 허용하려면이 코드를 사용하십시오.

 //only decimal
    $('.textbox').keypress(function(e) {
        if(e.which == 46 && $(this).val().indexOf('.') != -1) {
            e.preventDefault();
        } 
       if (e.which == 8 || e.which == 46) {
            return true;
       } else if ( e.which < 48 || e.which > 57) {
            e.preventDefault();
      }
    });

document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

더욱이:

• 클립 보드 API 및 이벤트

이 예를 참조하십시오 : http://www.p2e.dk/diverse/detectPaste.htm

기본적으로 oninput 이벤트로 모든 변경 사항을 추적 한 다음 문자열 비교로 붙여 넣기인지 확인합니다. 아, 그리고 IE에는 onpaste 이벤트가 있습니다. 그래서:

$ (something).bind ("input paste", function (e) {
    // check for paste as in example above and
    // do something
})

이 메소드는 jqueries contents (). unwrap ()을 사용합니다.

1. 먼저 붙여 넣기 이벤트 감지
2. 붙여 넣을 요소에 이미있는 태그에 고유 한 클래스를 추가하십시오.

3. 지정된 시간이 초과되면 이전에 설정 한 클래스가없는 모든 내용 풀기 태그를 스캔합니다. 참고 :이 방법은 아래 예 참조 와 같이 자체 닫는 태그를 제거하지 않습니다
   .

   //find all children .find('*') and add the class .within .addClass("within") to all tags
   $('#answer_text').find('*').each(function () {
   $(this).addClass("within");
   });
   setTimeout(function() {
   $('#answer_text').find('*').each(function () {
       //if the current child does not have the specified class unwrap its contents
       $(this).not(".within").contents().unwrap();
   });
   }, 0);

이것은 꽤 현명한 것으로 판명되었습니다. 붙여 넣기 이벤트 함수 내에서 코드를 실행하기 전에 입력 값이 업데이트되지 않습니다. 붙여 넣기 이벤트 함수 내에서 다른 이벤트를 호출하려고 시도했지만 입력 값이 여전히 이벤트 함수 내에서 붙여 넣은 텍스트로 업데이트되지 않았습니다. 이것이 키업을 제외한 모든 이벤트입니다. 붙여 넣기 이벤트 함수 내에서 키업을 호출하면 키업 이벤트 함수 내에서 붙여 넣은 텍스트를 삭제합니다. 그렇게 ...

$(':input').live
(
    'input paste',
    function(e)
    {
        $(this).keyup();
    }
);

$(':input').live
(
    'keyup',
    function(e)
    {
        // sanitize pasted text here
    }
);

여기에 하나의 경고가 있습니다. Firefox에서 모든 키업에서 입력 텍스트를 재설정하는 경우 텍스트가 입력 너비에서 허용되는 볼 수있는 영역보다 긴 경우 모든 키업에서 값을 재설정하면 자동으로 캐럿 위치로 텍스트를 스크롤하는 브라우저 기능이 작동하지 않습니다. 텍스트의 끝. 대신 텍스트가 맨 처음으로 스크롤되어 캐럿이 보이지 않게됩니다.

portlet-form-input-field 클래스를 사용하여 모든 필드에서 특수 문자를 제거하는 스크립트 :

// Remove special chars from input field on paste
jQuery('.portlet-form-input-field').bind('paste', function(e) {
    var textInput = jQuery(this);
    setTimeout(function() {
        textInput.val(replaceSingleEndOfLineCharactersInString(textInput.val()));
    }, 200);
});

function replaceSingleEndOfLineCharactersInString(value) {
    <%
        // deal with end-of-line characters (\n or \r\n) that will affect string length calculation,
        // also remove all non-printable control characters that can cause XML validation errors
    %>
    if (value != "") {
        value = value.replace(/(\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x0B|\x0C|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F)/gm,'');
        return value = value.replace(/(\r\n|\n|\r)/gm,'##').replace(/(\#\#)/gm,"\r\n");
    }
}

여기에 하나의 경고가 있습니다. Firefox에서 모든 키업에서 입력 텍스트를 재설정하는 경우 텍스트가 입력 너비에서 허용되는 볼 수있는 영역보다 긴 경우 모든 키업에서 값을 재설정하면 자동으로 캐럿 위치로 텍스트를 스크롤하는 브라우저 기능이 작동하지 않습니다. 텍스트의 끝. 대신 텍스트가 맨 처음으로 스크롤되어 캐럿이 보이지 않게됩니다.

function scroll(elementToBeScrolled) 
{
     //this will reset the scroll to the bottom of the viewable area. 
     elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight;
}