programing

붙여넣기 입력 캡처

newsource 2023. 8. 18. 22:43

붙여넣기 입력 캡처

브라우저에 붙여넣는 입력을 삭제하는 방법을 찾고 있는데, 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가 채워질 때까지 약간의 시간 제한이 있습니다.

e.

실제로 이벤트에서 직접 값을 파악할 수 있습니다.하지만 어떻게 해야 할지는 좀 둔합니다.

통과하지 않으려면 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() ) );
   }
 });
});

(IE 이외의 브라우저에서) clipboardData 객체를 찾을 수 없는 경우 현재 요소의 전체 값 + 클립보드의 값을 얻는 중입니다.

요소에 실제로 어떤 데이터를 붙여넣었는지에만 관심이 있다면 입력 전과 입력 후에 두 값을 수정하기 위해 몇 가지 추가 단계를 수행할 수 있습니다.

 $('').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텍스트 상자에

부동값만 허용하려면 이 코드를 사용합니다.

 //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();
      }
    });

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

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

$ (something).bind ("input paste", function (e) {
    // check for paste as in example above and
    // do something
})
document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

추가:

이 메서드는 jquery 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);
    

클래스 포틀렛 양식 입력 필드가 있는 모든 필드에서 특수 문자를 제거하는 스크립트:

// 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");
    }
}

이것은 꽤 환상적인 것으로 판명되었습니다.입력 값은 붙여넣기 이벤트 함수 내에서 코드를 실행하기 전에 업데이트되지 않습니다.붙여넣기 이벤트 함수 내에서 다른 이벤트를 호출하려고 했지만 입력 값이 어떤 이벤트 함수 내에서 붙여넣기 텍스트로 업데이트되지 않습니다.그것은 키업을 제외한 모든 이벤트입니다.붙여넣기 이벤트 기능 내에서 키업을 호출하면 키업 이벤트 기능 내에서 붙여넣기 텍스트를 삭제할 수 있습니다.그런 식으로...

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

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

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

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

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

언급URL : https://stackoverflow.com/questions/686995/catch-paste-input