jQuery는 붙여 넣기 이벤트에 바인딩, 붙여 넣기의 내용을 가져 오는 방법

jQuery는 붙여 넣기 이벤트에 바인딩, 붙여 넣기의 내용을 가져 오는 방법

---

jquery 토큰 tagit 플러그인이 있고 항목을 올바르게 추가하기 위해 붙여 넣기 이벤트에 바인딩하고 싶습니다.

다음과 같이 붙여 넣기 이벤트에 바인딩 할 수 있습니다.

    .bind("paste", paste_input)

...

function paste_input(e) {
    console.log(e)
    return false;
}

실제로 붙여 넣은 콘텐츠 값을 어떻게 얻을 수 있습니까?

---

현대 브라우저에서 작동하는 onpaste 이벤트가 있습니다. 개체 getData에 대한 함수를 사용하여 붙여 넣은 데이터에 액세스 할 수 있습니다 clipboardData.

$("#textareaid").bind("paste", function(e){
    // access the clipboard using the api
    var pastedData = e.originalEvent.clipboardData.getData('text');
    alert(pastedData);
} );

참고 바인딩 및 바인딩 해제가 선호 호출하는 것입니다 jQuery를 (3)의로 사용되지 않습니다 에 .

모든 최신 브라우저는 Clipboard API를 지원합니다 .

참조 : Jquery에서 붙여 넣기를 처리하는 방법?

---

이것에 대해 : http://jsfiddle.net/5bNx4/

.onjq1.7 등을 사용 하는 경우 사용하십시오 .

동작 : paste첫 번째 텍스트 영역에 아무것도 입력하지 않으면 아래의 teaxtarea가 캐런을 캡처합니다.

휴식이 원인에 도움이되기를 바랍니다. :)

유용한 링크 =>

jQuery에서 oncut, oncopy 및 onpaste를 어떻게 처리합니까?

붙여 넣기 입력 캐치

암호

$(document).ready(function() {
    var $editor    = $('#editor');
    var $clipboard = $('<textarea />').insertAfter($editor);

    if(!document.execCommand('StyleWithCSS', false, false)) {
        document.execCommand('UseCSS', false, true);
    }

    $editor.on('paste, keydown', function() {
        var $self = $(this);            
        setTimeout(function(){ 
            var $content = $self.html();             
            $clipboard.val($content);
        },100);
     });
});

---

최근에 이와 비슷한 일을해야했습니다. 다음 디자인을 사용하여 붙여 넣기 요소와 값에 액세스했습니다. jsFiddle 데모

$('body').on('paste', 'input, textarea', function (e)
{
    setTimeout(function ()
    {
        //currentTarget added in jQuery 1.3
        alert($(e.currentTarget).val());
        //do stuff
    },0);
});

---

또 다른 접근 방식 : 해당 input이벤트가 이벤트도 포착합니다 paste.

$('textarea').bind('input', function () {
    setTimeout(function () { 
        console.log('input event handled including paste event');
    }, 0);
});

---

$(document).ready(function() {
    $("#editor").bind('paste', function (e){
        $(e.target).keyup(getInput);
    });

    function getInput(e){
        var inputText = $(e.target).html(); /*$(e.target).val();*/
        alert(inputText);
        $(e.target).unbind('keyup');
    }
});

---

필드의 원래 값과 필드의 변경된 값을 비교하고 그 차이를 붙여 넣은 값으로 공제 할 수 있습니다. 이렇게하면 필드에 기존 텍스트가 있어도 붙여 넣은 텍스트를 올바르게 포착합니다.

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

---

It would appear as though this event has some clipboardData property attached to it (it may be nested within the originalEvent property). The clipboardData contains an array of items and each one of those items has a getAsString() function that you can call. This returns the string representation of what is in the item.

Those items also have a getAsFile() function, as well as some others which are browser specific (e.g. in webkit browsers, there is a webkitGetAsEntry() function).

For my purposes, I needed the string value of what is being pasted. So, I did something similar to this:

$(element).bind("paste", function (e) {
    e.originalEvent.clipboardData.items[0].getAsString(function (pStringRepresentation) {
        debugger; 
        // pStringRepresentation now contains the string representation of what was pasted.
        // This does not include HTML or any markup. Essentially jQuery's $(element).text()
        // function result.
    });
});

You'll want to perform an iteration through the items, keeping a string concatenation result.

The fact that there is an array of items makes me think more work will need to be done, analyzing each item. You'll also want to do some null/value checks.

---

This work on all browser to get pasted value. And also to creating common method for all text box.

$("#textareaid").bind("paste", function(e){       
    var pastedData = e.target.value;
    alert(pastedData);
} )

---

On modern browsers it's easy: just use the input event along with the inputType attribute:

$(document).on('input', 'input, textarea', function(e){
  if (e.originalEvent.inputType == 'insertFromPaste') {
    alert($(this).val());
  }
});

https://codepen.io/anon/pen/jJOWxg

참고URL : https://stackoverflow.com/questions/11605415/jquery-bind-to-paste-event-how-to-get-the-content-of-the-paste