Question

我有一个输入框和一个按钮。当我 CTRL + C 和 CTRL + V 时，按钮的颜色会发生变化。但是，如果我右键单击“复制并粘贴”，则按钮不会更改颜色。当我右键单击“复制并粘贴”时，如何使按钮改变颜色？

脚本

$(document).on('keyup click', "#inputfield", function() {
    var txtEntered = false;
    if ($(this).val() !== "") {
        txtEntered = true;
    }
    if (txtEntered)
        $("#btn").removeClass().addClass('green');
    else
        $("#btn").removeClass().addClass('red');
});

Answer 1

尝试使用此类input和propertychange事件。

代码段：

 $(document).on('input propertychange', "#inputfield", function () {
    var txtEntered = false;       
    if ($(this).val() !== "") {
        txtEntered = true;
    }
    if (txtEntered)
        $("#btn").removeClass().addClass('green');
    else
        $("#btn").removeClass().addClass('red');
});

DEMO

注意：它仅适用于现代浏览器

Answer 2

试试这个：

$(document).on('input', "#inputfield", function () {
    var txtEntered = false;
    if ($(this).val() !== "") {
        txtEntered = true;
    }

    if (txtEntered) $("#btn").removeClass().addClass('green');
    else $("#btn").removeClass().addClass('red');
});

Answer 3

在HTML中使用onpaste事件：

<input id="inputfield" type="text" onpaste="onPasteTest()"/>
<button id="btn"  class="red">Click</button>

使用Javascript：

function onPasteTest(){
    var txtEntered = false;
    if($(this).val() !== ""){
            txtEntered = true;
            }

    if(txtEntered)
        $("#btn").removeClass().addClass('green');
    else
        $("#btn").removeClass().addClass('red');
}

它在你的小提琴中不起作用，但是here's a working example。

Answer 4

您可以尝试使用change事件，也可以使用IE。在文本框中，只有在内容发生变化时，此事件才会在失去焦点时触发。

＆＃13;

var btn;
$(function() {
  $('#inputfield').on('change', toggleColor);
  btn = $('#btn');
});

var toggleColor = function(e) {
  btn.toggleClass('err', '' === this.value.replace(/\s/g, ''));//takes care of white spaces 
};

＆＃13;

.err {
  color: red;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type='text' id='inputfield' />
<input type='button' id='btn' value='Click me !' />

＆＃13;

如何在右键单击粘贴选项上更改按钮颜色？

4 个答案: