Обнаружение вставленного текста с помощью Ctrl + V или правой кнопкой мыши -> Вставить - PullRequest
21 голосов
/ 09 июля 2010

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

Ответы [ 6 ]

19 голосов
/ 09 июля 2010

Вы можете использовать событие вставки, чтобы обнаружить вставку в большинстве браузеров (особенно не Firefox 2, хотя).Когда вы обрабатываете событие вставки, запишите текущий выбор, а затем установите краткий таймер, который вызывает функцию после завершения вставки.Затем эта функция может сравнивать длины и знать, где искать вставленный контент.Что-то вроде следующего.Для краткости, функция, которая получает выбор текстовой области, не работает в 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
});
10 голосов
/ 02 декабря 2016

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

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

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

4 голосов
/ 02 февраля 2013

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

2 голосов
/ 31 января 2013

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

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

  1. Установите для объекта события returnValue значение false в событии onbeforepaste, чтобы включитьВставить пункт контекстного меню.
  2. Отменить поведение клиента по умолчанию, установив для объекта события returnValue значение false в обработчике события onpaste.Это относится только к объектам, таким как текстовое поле, для которых определено поведение по умолчанию.
  3. Укажите формат данных, в котором можно вставить выборку с помощью метода getData объекта clipboardData.
  4. вызовите метод в событии 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

1 голос
/ 11 марта 2016

Мне нравится предложение о щелчке правой кнопкой мыши

$("#message").on('keyup contextmenu input', function(event) { 
  alert("ok");
});

, найденное здесь:

Источник: Событие с правым кликом мыши и вставкой

1 голос
/ 09 июля 2010

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

  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> 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...