Як виявити Ctrl + V, Ctrl + C за допомогою JavaScript?

Як виявити ctrl+ v, ctrl+ cза допомогою Javascript?

Мені потрібно обмежити вставки в своїх текстових областях, кінцевий користувач не повинен копіювати та вставляти вміст, користувач повинен лише вводити текст у текстовій області.

Як цього досягти?

Я просто робив це з інтересу. Я погоджуюсь, що це не правильно робити, але я думаю, що це повинно бути рішенням оп ... Також код можна легко розширити, щоб додати функціональність, а не забрати його (як більш досконалий буфер обміну або 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 demo

EDIT: видалено 3 надлишкових рядки (із залученням напр.) Завдяки пропозиції Тіма Дауна (див. Коментарі)

EDIT: додана підтримка Macs ( cmdключ замість ctrl)

За допомогою 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/

Хоча це може дратувати, коли його застосовують як антипіратський захід, я можу побачити, що можуть бути деякі випадки, коли це було б законно, так:

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в події c, наприклад, після Ctrlключа притиснуто. Я також заміщений ctrlKeyз metaKeyдля Маков.

Обмеження цього методу:

• Opera не дозволяє відключати події правої кнопки миші

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

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

• Також немає гарантії, що для людей з різними розкладками / локалями клавіатури, які копіюють / вставляють / вирізають, є однакові ключові коди (хоча макети часто просто відповідають тому ж стандарту, що й англійська мова), але ковдра "відключити всі клавіші управління" означає, що виберіть усі тощо також буде відключено, тому я думаю, що це компроміс, який потрібно зробити.

Там ще один спосіб зробити це: 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 для отримання додаткової інформації.

Демо-версія: 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!');
        }
    });

}); 

Коротке рішення щодо запобігання користувачеві використовувати контекстне меню, копіювати та вирізати 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;
}

Якщо ви використовуєте 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.
      } 
    }

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

• http://miku.github.com/jquery-retype

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

Ви можете використовувати цей код для виявлення та запобігання їх дії 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();
    });

замість onkeypress використовуйте onkeydown.

<input type="text" onkeydown="if(event.ctrlKey && event.keyCode==86){return false;}" name="txt">

Інший підхід (не потрібен плагін) - це просто використовувати ctrlKeyвластивість об'єкта події, який передається. Він вказує, чи Ctrlбув натиснутий під час події, як це:

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

Дивіться також jquery: keypress, ctrl + c (або якесь подібне комбо) .

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

У мене вже є ваша проблема, і я вирішив її наступним кодом .., який приймає лише номери

$('#<%= 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

Ви можете прослухати подію натискання клавіш і зупинити подію за замовчуванням (введення тексту), якщо вона відповідає конкретним кодам клавіш

Важлива примітка

Я e.keyCodeдеякий час використовував, і я виявив, що, коли я натискаю ctrl+ ., цей атрибут повертає неправильне число, 190, а код ASCI .- 46!

Тому слід використовувати e.key.toUpperCase().charCodeAt(0)замість цього e.keyCode.

Є кілька способів запобігти цьому.

Однак користувач завжди зможе вимкнути 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;});

Редагувати: Як сказав Тім Даун, всі ці функції залежать від браузера.