Обнаружить вложенный текст с помощью Ctrl + V или щелчок правой кнопкой мыши → вставить

Как определить, какой текст пользователь вставляет в textarea с помощью JS?

Ответы

Ответ 1

Вы можете использовать событие вставки для обнаружения вставки в большинстве браузеров (в частности, не Firefox 2). Когда вы обрабатываете событие вставки, записываете текущий выбор, а затем устанавливаете короткий таймер, который вызывает функцию после завершения вставки. Эта функция затем может сравнивать длины и знать, где искать вставленный контент. Что-то вроде следующего. Для краткости функция, которая получает выбор textarea, не работает в IE. См. Здесь что-то, что делает: Как получить начальную и конечную точки выбора в текстовой области?

function getTextAreaSelection(textarea) {
    var start = textarea.selectionStart, end = textarea.selectionEnd;
    return {
        start: start,
        end: end,
        length: end - start,
        text: textarea.value.slice(start, end)
    };
}

function detectPaste(textarea, callback) {
    textarea.onpaste = function() {
        var sel = getTextAreaSelection(textarea);
        var initialLength = textarea.value.length;
        window.setTimeout(function() {
            var val = textarea.value;
            var pastedTextLength = val.length - (initialLength - sel.length);
            var end = sel.start + pastedTextLength;
            callback({
                start: sel.start,
                end: end,
                length: pastedTextLength,
                text: val.slice(sel.start, end)
            });
        }, 1);
    };
}

var textarea = document.getElementById("your_textarea");
detectPaste(textarea, function(pasteInfo) {
    alert(pasteInfo.text);
    // pasteInfo also has properties for the start and end character
    // index and length of the pasted text
});

Ответ 2

HTML5 уже предоставляет onpaste не только <input/>, но также редактируемые элементы (<p contenteditable="true" />,...)

<input type="text" onpaste="myFunction()" value="Paste something in here">

Подробнее здесь

Ответ 3

Довольно старый поток, но теперь вы можете использовать http://willemmulder.github.com/FilteredPaste.js/. Это позволит вам контролировать то, что вставляется в текстовое поле или контентное.

Ответ 4

Следующее может помочь вам

  function submitenter(myfield,e)
  {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    else return true;
    if (keycode == //event code of ctrl-v)
    {
      //some code here
    }

  }

  <teaxtarea name="area[name]" onKeyPress=>"return submitenter(this,event);"></textarea>

Ответ 5

Работает на IE 8 - 10

Создание настраиваемого кода для включения команды Paste требует нескольких шагов.

  • Установите объект события returnValue в false в событии onbeforepaste, чтобы включить пункт контекстного меню Вставить.
  • Отмените поведение клиента по умолчанию, установив для объекта события returnValue значение false в обработчике события onpaste. Это относится только к объектам, таким как текстовое поле, для которых определено поведение по умолчанию.
  • Укажите формат данных для вставки выделения с помощью метода getData объекта clipboardData.
  • вызывать метод в событии onpaste для выполнения пользовательского кода вставки.

Чтобы вызвать это событие, выполните одно из следующих действий:

  • Щелкните правой кнопкой мыши, чтобы отобразить контекстное меню и выберите "Вставить".
  • Или нажмите CTRL + V.

<сильные > Примеры

<HEAD>
<SCRIPT>
var sNewString = "new content associated with this object";
var sSave = "";
// Selects the text that is to be cut.
function fnLoad() {
    var r = document.body.createTextRange();
    r.findText(oSource.innerText);
    r.select();
}
// Stores the text of the SPAN in a variable that is set 
// to an empty string in the variable declaration above.
function fnBeforeCut() {
    sSave = oSource.innerText;
    event.returnValue = false;
}
// Associates the variable sNewString with the text being cut.
function fnCut() {
    window.clipboardData.setData("Text", sNewString);
}
function fnBeforePaste() {
    event.returnValue = false;
}
// The second parameter set in getData causes sNewString 
// to be pasted into the text input. Passing no second
// parameter causes the SPAN text to be pasted instead.
function fnPaste() {
    event.returnValue = false;
    oTarget.value = window.clipboardData.getData("Text", sNewString);
}
</SCRIPT>
</HEAD>
<BODY onload="fnLoad()">
<SPAN ID="oSource" 
      onbeforecut="fnBeforeCut()" 
      oncut="fnCut()">Cut this Text</SPAN>
<INPUT ID="oTarget" TYPE="text" VALUE="Paste the Text Here"
      onbeforepaste="fnBeforePaste()" 
      onpaste="fnPaste()">
</BODY>

Полный документ: http://msdn.microsoft.com/en-us/library/ie/ms536955(v=vs.85).aspx