Как определить Ctrl + V, Ctrl + C, используя JavaScript?

173

Как обнаружить ctrl+ v, ctrl+ cс помощью Javascript?

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

Как этого добиться?

Ramakrishnan
источник
3
Какова цель этого? Единственные два допустимых сценария, о которых я могу подумать, - это поля пароля (которые вы все равно не можете скопировать) и тест скорости набора текста. Я уверен, что вы можете обнаружить подозрительно быструю печать.
Пол Мясник
9
@Paul Butcher, @Propeng: Есть сценарии, где это нужно. Очень простой пример: сайт для изучения иностранных языков. Эффект обучения усиливается, если вы вводите слова вручную вместо использования копирования и вставки.
back2dos
2
Другая законная ситуация может возникнуть, когда для обнаружения ошибок требуется двойная запись (например, дважды введите адрес электронной почты, чтобы мы знали, что в нем нет опечаток). Тем не менее, такой пользователь может хранить список случайно сгенерированных адресов электронной почты (например, sneakemail) и, возможно, захочет вставить его для точности.
Пол Мясник
40
@Paul Butcher - это вообще недопустимая ситуация, я ненавижу сайты, которые делают это, и я всегда копирую / вставляю свой (длинный) адрес электронной почты из одного ввода в другой. Прерывание копирования / вставки - главная проблема юзабилити. Это действительно отталкивает пользователя, потому что это настолько фундаментально для его ментальной модели, что они ожидают, что оно «просто сработает». Вы как будто пытались открыть дверь, и она отодвинулась от вас, а не к вам!
EMP
4
Всякий раз, когда такая копия вставляется, это не разрешается на странице, то, что я делаю, вставляю текст где-то еще (я использую строку URL), а затем Ctrl + A (выберите текст, только что вставленный в URL), перетаскивайте поле в обзоре, где вставка отключена. Я думаю, это что-то не предотвратимое на сегодняшний день.
Джанакирам

Ответы:

180

Я просто сделал это из интереса. Я согласен, что это не правильно, но я думаю, что это должно быть решение оператора ... Также код можно легко расширить, чтобы добавить функциональность, а не убирать ее (например, более продвинутый буфер обмена или Ctrl+ sзапуск сервера). Сберегать).

$(document).ready(function() {
    var ctrlDown = false,
        ctrlKey = 17,
        cmdKey = 91,
        vKey = 86,
        cKey = 67;

    $(document).keydown(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
    }).keyup(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
    });

    $(".no-copy-paste").keydown(function(e) {
        if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false;
    });
    
    // Document Ctrl + C/V 
    $(document).keydown(function(e) {
        if (ctrlDown && (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
        if (ctrlDown && (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Ctrl+c Ctrl+v disabled</h3>
<textarea class="no-copy-paste"></textarea>
<br><br>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea>

Также, чтобы уточнить, для этого скрипта требуется библиотека jQuery.

Codepen демо

РЕДАКТИРОВАТЬ: удалены 3 лишних строки (включая e.which) благодаря предложению Тима Дауна (см. Комментарии)

РЕДАКТИРОВАТЬ: добавлена ​​поддержка Mac ( cmdключ вместо ctrl)

jackocnr
источник
4
Почему то keydownи keyupобработчики document? Вы можете проверить наличие клавиши Ctrl в $(".no-copy-paste").keydownобработчике. Кроме того, в этом нет необходимости e.keyCode || e.which: он e.keyCodeработает во всех браузерах, которые e.whichработают, поэтому e.whichникогда не будет использоваться. Возможно, вы думали о том, как получить код символа из keypressсобытия? Наконец, это ничего не изменит со вставками из контекстного меню или меню редактирования, но я полагаю, что OP не спрашивал об этом напрямую.
Тим Даун
@Tim: Обработчики клавиш Ctrl в документе должны быть общими - они могут не захотеть, чтобы переменная ctrlDown была исключительно связана с входными данными no-copy-paste. Это, наверное, ОТТ. Спасибо за совет e.which - с тех пор я потратил полчаса на изучение различных вариантов использования e.keyCode и e.which с keydown () и keypress (), и что за беспорядок (особенно в firefox)!
Jackocnr
1
jackocnr: Я рекомендую статью Яна Вольтера по обработке ключей JavaScript: unixpapa.com/js/key.html Я использовал его для справки много раз и не нашел ошибку.
Тим Даун
3
Чувак! Спасибо! Это именно то, что мне было нужно, чтобы пользователи могли выбрать «элемент» (запись календаря) в веб-приложении, которое я пишу, нажмите Ctrl + C, чтобы «скопировать» его, затем Ctrl + V, чтобы «вставить» его, все без фактически взаимодействуя со всемогущим благословенным буфером обмена. Ctrl + C Я помню, на что они нажимали, Ctrl + V Я дублирую это, все выигрывают.
Дан Ф
2
Я не эксперт или что-то еще, но я думаю, что было бы лучше проверить e.metaKeyили e.ctrlKeyбыть trueвместо того, чтобы назначать числовые значения клавишам и проверять их.
шлюха
52

С помощью jquery вы можете легко обнаружить копирование, вставку и т. Д., Связав функцию:

$("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});

Более подробная информация здесь: http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

Крис Андерссон
источник
1
К сожалению, этот метод будет срабатывать только в Firefox, если выделен текст
Ясир Энназк
44

Хотя это может раздражать при использовании в качестве меры борьбы с пиратством, я вижу, что в некоторых случаях это может быть законным, поэтому:

function disableCopyPaste(elm) {
    // Disable cut/copy/paste key events
    elm.onkeydown = interceptKeys

    // Disable right click events
    elm.oncontextmenu = function() {
        return false
    }
}

function interceptKeys(evt) {
    evt = evt||window.event // IE support
    var c = evt.keyCode
    var ctrlDown = evt.ctrlKey||evt.metaKey // Mac support

    // Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
    if (ctrlDown && evt.altKey) return true

    // Check for ctrl+c, v and x
    else if (ctrlDown && c==67) return false // c
    else if (ctrlDown && c==86) return false // v
    else if (ctrlDown && c==88) return false // x

    // Otherwise allow
    return true
}

Я использовал event.ctrlKeyвместо проверки для кода ключа , как в большинстве браузеров на Mac OS X Ctrl/ Alt«вниз» и «вверх» события никогда не срабатывает, поэтому единственный способ обнаружения является использование event.ctrlKeyв , например , с события после того , как Ctrlключ удерживается. Я также замещен ctrlKeyс metaKeyдля Маков.

Ограничения этого метода:

  • Opera не позволяет отключать события правого клика

  • Насколько я знаю, перетаскивание между окнами браузера невозможно предотвратить.

  • edit-> copyпункт меню, например , в Firefox все еще может позволить копировать / вставить.

  • Также нет гарантии, что для людей с разными раскладками / языками клавиатуры, которые копируют / вставляют / вырезают, одни и те же коды клавиш (хотя раскладки часто следуют тому же стандарту, что и английский), но общее «отключить все клавиши управления» означает, что выбраны все и т. Д. также будет отключен, так что я думаю, что это компромисс, который необходимо сделать.
криогенный
источник
14

Там еще один способ сделать это: onpaste , oncopyи oncutсобытия могут быть зарегистрированы и отменены в IE, Firefox, Chrome, Safari (с некоторыми проблемами несовершеннолетних), единственный крупный браузер , который не позволяет отменить эти события является Opera.

Как вы можете видеть в моем другом ответе, перехват Ctrl+ vи Ctrl+ cсопровождается множеством побочных эффектов, но он по-прежнему не мешает пользователям вставлять с помощью Editменю Firefox и т. Д.

function disable_cutcopypaste(e) {
    var fn = function(evt) {
        // IE-specific lines
        evt = evt||window.event
        evt.returnValue = false

        // Other browser support
        if (evt.preventDefault) 
            evt.preventDefault()
        return false
    }
    e.onbeforepaste = e.onbeforecopy = e.onbeforecut = fn
    e.onpaste = e.oncopy = e.oncut = fn
}

Safari по-прежнему имеет некоторые незначительные проблемы с этим методом (он очищает буфер обмена вместо вырезания / копирования при предотвращении дефолта), но эта ошибка, похоже, исправлена ​​в Chrome.

См. Также: http://www.quirksmode.org/dom/events/cutcopypaste.html и соответствующую тестовую страницу http://www.quirksmode.org/dom/events/tests/cutcopypaste.html для получения дополнительной информации.

криогенный
источник
9

Демонстрация в реальном времени: http://jsfiddle.net/abdennour/ba54W/

$(document).ready(function() {

    $("#textA").bind({
        copy : function(){
            $('span').text('copy behaviour detected!');
        },
        paste : function(){
            $('span').text('paste behaviour detected!');
        },
        cut : function(){
            $('span').text('cut behaviour detected!');
        }
    });

}); 
Абденнур ТУМИ
источник
8

Краткое решение для предотвращения использования пользователем контекстного меню, копирования и вырезания в jQuery:

jQuery(document).bind("cut copy contextmenu",function(e){
    e.preventDefault();
});

Также может пригодиться отключение выделения текста в CSS:

.noselect {  
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}
jendarybak
источник
4

Если вы используете ctrlKeyсобственность, вам не нужно поддерживать состояние.

   $(document).keydown(function(event) {
      // Ctrl+C or Cmd+C pressed?
      if ((event.ctrlKey || event.metaKey) && event.keyCode == 67) {
         // Do stuff.
      }

      // Ctrl+V or Cmd+V pressed?
      if ((event.ctrlKey || event.metaKey) && event.keyCode == 86) {
         // Do stuff.
      }

      // Ctrl+X or Cmd+X pressed?
      if ((event.ctrlKey || event.metaKey) && event.keyCode == 88) {
         // Do stuff.
      } 
    }
Crashalot
источник
Это правильный ответ! Событие имеет свойство ctrlKey = true, если с ним нажата клавиша. Нам не нужно никаких дополнительных мероприятий.
Январь
3

Я написал плагин jQuery, который ловит нажатия клавиш. Его можно использовать для включения многоязычного ввода сценариев в html-формах без ОС (кроме шрифтов). Это около 300 строк кода, может быть, вы хотели бы посмотреть:

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

Мик
источник
3

Вы можете использовать этот код для правого клика, CTRL+ C, CTRL+ V,CTRL + для Xобнаружения и предотвращения их действия

$(document).bind('copy', function(e) {
        alert('Copy is not allowed !!!');
        e.preventDefault();
    }); 
    $(document).bind('paste', function() {
        alert('Paste is not allowed !!!');
        e.preventDefault();
    }); 
    $(document).bind('cut', function() {
        alert('Cut  is not allowed !!!');
        e.preventDefault();
    });
    $(document).bind('contextmenu', function(e) {
        alert('Right Click  is not allowed !!!');
        e.preventDefault();
    });
Варун Нагария
источник
3

вместо onkeypress используйте onkeydown.

<input type="text" onkeydown="if(event.ctrlKey && event.keyCode==86){return false;}" name="txt">
atiruz
источник
2

Другой подход (плагин не нужен) это просто использовать ctrlKeyсвойство объекта события, который передается внутрь. Он указывает, Ctrlбыл ли нажат во время события, например так:

$(document).keypress("c",function(e) {
  if(e.ctrlKey)
    alert("Ctrl+C was pressed!!");
});

Смотрите также jquery: нажатие клавиш, ctrl + c (или что-то подобное) .

Абу Гуфран
источник
0

Не забывайте, что, хотя вы можете обнаружить и заблокировать Ctrl+ C/ V, вы все равно можете изменить значение определенного поля.
Лучшим примером для этого является функция Chrome Inspect Element, которая позволяет вам изменять значение-свойство поля.

BlueCacti
источник
0

у меня уже есть ваша проблема, и я решил ее с помощью следующего кода .., которые принимают только цифры

$('#<%= mobileTextBox.ClientID %>').keydown(function(e) {
            ///// e.which Values
            // 8  : BackSpace , 46 : Delete , 37 : Left , 39 : Rigth , 144: Num Lock 
            if (e.which != 8 && e.which != 46 && e.which != 37 && e.which != 39 && e.which != 144
                && (e.which < 96 || e.which > 105 )) {
                return false;
            }
        });

вы можете обнаружить Ctrlидентификаторe.which == 17

Амр Бадави
источник
-1

Вы можете прослушать событие нажатия клавиши и остановить событие по умолчанию (ввод текста), если оно соответствует определенным кодам клавиш.

Балу
источник
-1

Важная заметка

Я использовал e.keyCodeнекоторое время, и я обнаружил, что когда я нажимаю ctrl+ ., этот атрибут возвращает неправильное число, 190, в то время как код ascii .равен 46!

Так что вы должны использовать e.key.toUpperCase().charCodeAt(0)вместо e.keyCode.

Амир Фо
источник
-4

Есть несколько способов предотвратить это.

Однако пользователь всегда сможет отключить JavaScript или просто посмотреть на исходный код страницы.

Некоторые примеры (требуется jQuery)

/**
* Stop every keystroke with ctrl key pressed
*/
$(".textbox").keydown(function(){
    if (event.ctrlKey==true) {
        return false;
    }
});

/**
* Clear all data of clipboard on focus
*/
$(".textbox").focus(function(){
    if ( window.clipboardData ) {
        window.clipboardData.setData('text','');
    }
});

/**
* Block the paste event
*/
$(".textbox").bind('paste',function(e){return false;});

Редактировать: Как сказал Тим Даун, все эти функции зависят от браузера.

Густаво Кардосо
источник
2
У этого есть ряд проблем: во-первых, он не будет работать в браузерах, у которых нет pasteсобытия, которое включает в себя все версии Firefox до версии 3. Во-вторых, window.clipboardDataэто только IE, и я считаю, что теперь он по умолчанию отключен в IE , В-третьих, отключение всех keydownсобытий, когда нажата клавиша Ctrl, является чрезмерным: вы предотвращаете полезные сочетания клавиш, такие как Ctrl-A (выбрать все) и Ctrl-Z (отменить). В-четвертых, как уже упоминалось, это действительно плохая вещь.
Тим Даун
Вы правы в том, что не работает на каждом браузере. Никто блок Ctrl действительно раздражает. Это было удобно, когда клиент хотел заблокировать поле «Подтверждение по электронной почте и паролю».
Густаво Кардосо