Jquery как получить вставленный контент

У меня есть небольшая проблема с вложением вложенного текста в мой ввод:

 <input type="text" id="myid" val="default">
 $('#myid').on('paste',function(){
        console.log($('#myid').val());
 });

console.log показывает:

default

Как я catch вставляемый текст и готов к использованию?

ОТВЕТЫ

Ответ 1

Поскольку событие paste инициируется до обновления входного значения, решение заключается в следующем:

  1. Вместо этого захватывайте данные из буфера обмена, так как данные буфера обмена будут точно такими же, как данные, вставленные во входные данные в тот момент.

  2. Подождите, пока значение не обновится с помощью таймера

К счастью, спустя годы после публикации оригинального ответа, большинство современных браузеров теперь поддерживают фантастический API буфера обмена, гораздо более элегантное решение для сбора данных из буфера обмена.

Для браузеров, которые не поддерживают API буфера обмена, мы можем обратиться к ненадежному event.clipboardData если мы event.clipboardData, какая версия, если таковая имеется, поддерживается в браузере.

В качестве окончательного отступления, использование таймера для задержки до обновления входного значения будет работать во всех браузерах, что делает его по-настоящему кросс-браузерным решением.

Я сделал удобную функцию, которая обрабатывает все

function catchPaste(evt, elem, callback) {
  if (navigator.clipboard && navigator.clipboard.readText) {
    // modern approach with Clipboard API
    navigator.clipboard.readText().then(callback);
  } else if (evt.originalEvent && evt.originalEvent.clipboardData) {
    // OriginalEvent is a property from jQuery, normalizing the event object
    callback(evt.originalEvent.clipboardData.getData('text'));
  } else if (evt.clipboardData) {
    // used in some browsers for clipboardData
    callback(evt.clipboardData.getData('text/plain'));
  } else if (window.clipboardData) {
    // Older clipboardData version for Internet Explorer only
    callback(window.clipboardData.getData('Text'));
  } else {
    // Last resort fallback, using a timer
    setTimeout(function() {
      callback(elem.value)
    }, 100);
  }
}

// to be used as 

$('#myid').on('paste', function(evt) {
  catchPaste(evt, this, function(clipData) {
    console.log(clipData);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myid" />

Ответ 2

Принятый ответ на самом деле взломанный и уродливый, кажется, предлагается довольно часто для события paste в stackoverflow. Я думаю, что лучший способ сделать это - this

$('#someInput').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    //IE9 Equivalent ==> window.clipboardData.getData("Text");   
});

Ответ 3

$('#myid').on('paste' , function(e){
   get_content(this);
});

function get_content(gelen){
var value_input = $(gelen).val();
document.getElementById("write-value").innerHTML = value_input;
console.log(value_input);
}
input{ width: calc(100% - 16px); padding:8px; font-size:large}
div{ color:red; margin-top:16px; padding:8px; font-size:large}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myid" onkeyUP="get_content(this)" >

<div id="write-value">
</div>

Ответ 4

Большую картину, я думаю, вы обычно хотите три события:

  1. Когда пользователь вставляет
  2. Когда пользователь нажимает <enter>
  3. Когда текстовое поле теряет фокус.

Я не хочу on('input') потому что это вызывает событие для каждого нажатия клавиши.

Таким образом, вы получаете одно событие, когда пользователь заканчивает вводить текстовое поле.

$(document).ready(function () {

            $('#myid').keydown(function (e) {
                var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                if (key == 13) {
                    e.preventDefault();
                    alert($(this).val());
                }
            }).on("change", function () {
                alert($(this).val());
            }).on("paste", function (e) {
                var _this = this;
                // Short pause to wait for paste to complete
                setTimeout(function () {
                    alert($(_this).val());
                }, 100);
            });
        });

Ответ 5

Попробуйте это или добавьте timeOut тоже:

   $('#myid').on('paste',function(){
           console.log(this.value);
    });