Поймать вставленный вход в textarea

Question

с javascript (JQuery).

Поиск в Интернете, кажется, что это невозможно. До сих пор у меня есть что-то вроде:

$("#textAreaId").bind('paste', function (e) { 
     alert('pasting text!!!!'); 

     var data = $("#taData").val(); 

     alert(data); 



    }); 

но данные пуст на данном этапе ... есть способ, чтобы захватить вставленный ввода после того, как он был вставлен? Похоже, должен быть способ.

событие keyup в JQuery не запускается при вставке.

Любые идеи?

Answer 1

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

$(document).ready(function() {   

    $("#taData").bind('paste', function (e) { 
     setTimeout(function() { DisplayPastedData(); }, 100); 
    });  

}); 



function DisplayPastedData() { 

    var data = $("#taData").val(); 
    alert('input pasted ' + data); 


} 

Я произвольно выбрал 100 миллисекунд, чтобы подождать, что прекрасно работает с моим максимальным количеством вставленных данных.

Answer 2

Не все браузеры поддерживают те же возможности копирования и вставки. Вот график, какой браузер поддержки, которая работает:

http://www.quirksmode.org/dom/events/cutcopypaste.html

Если браузер поддерживает захвата копирования/вставки события, JQuery должен работать нормально. Я бы предложил проверить каждый из ваших целевых браузеров.

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

http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/

из статьи:

var formChanged = false; 

$(document).ready(function() { 
    $('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i) { 
      $(this).data('initial_value', $(this).val()); 
    }); 

    $('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() { 
      if ($(this).val() != $(this).data('initial_value')) { 
       handleFormChanged(); 
      } 
    }); 

    $('#my_form .editable').bind('change paste', function() { 
      handleFormChanged(); 
    }); 

    $('.navigation_link').bind("click", function() { 
      return confirmNavigation(); 
    }); 
}); 

function handleFormChanged() { 
    $('#save_or_update').attr("disabled", false); 
    formChanged = true; 
} 

function confirmNavigation() { 
    if (formChanged) { 
      return confirm('Are you sure? Your changes will be lost!'); 
    } else { 
      return true; 
    } 
} 

Answer 3

Довольно старая нить, но теперь вы можете использовать FilteredPaste.js (http://willemmulder.github.com/FilteredPaste.js/). Он позволит вам контролировать, какой контент вставляется в текстовое поле или контент, и вы сможете фильтровать/изменять/извлекать контент по своему усмотрению.