代码之家 › 专栏 › 技术社区 › Philipp M

如果值为false或true,则禁用和激活按键

keypress javascript

0

Philipp M · 技术社区 · 6 年前

我有一个键盘输入如下:

$('.input-name').keypress(function(e){
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if(keycode == '13'){
        e.preventDefault();
        myFunction();
    }
});

如果我点击enter myfunction()就会被调用。

现在我想检查另一个值是假还是真…然后停用并激活按键。我该怎么做?下面检查var is_name是否为true或false:

var is_name;

$('.input-name').on('input', function () {      
    is_name = $('#abcName').val();
    if ( is_name == false ) {
        $('button.filter').attr('disabled','disabled');

        // Deactivate keypress

    } else {
        $('button.filter').removeAttr('disabled');

        // Activate keypress        

    }
});

2 回复 | 直到 6 年前

1

0

Hary 6 年前

你可以用 On 和 Off

$(function(){

$("#change_event").change(function(){

  var is_name = $(this).val();

  if (is_name == "true")
  {
    console.log(is_name + " Keypress event Added");
    $('.input-name').on('keypress', function(){ console.log("Keypress event"); })
  }
  else
  {
    console.log(is_name + " Keypress event Removed");
    $('.input-name').off('keypress')
  }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="change_event">
<option value="">Choose</option>
<option value="true">Add Event</option>
<option value="false">Remove Event</option>
</select>

<input class="input-name" />

2

0

Matthi 6 年前

你需要某种状态。在你的情况下是由 is_name . 如果is name是falsy,则按enter将不起作用,并且 myFunction 不会被处决的。

var is_name = "";
var
    $nameInput = $('.input-name'),
    $filterButton = $('button.filter');

function myFunction() {
    console.log('Meow');
}

$nameInput.on('keyup', function (e) {      
    is_name = $(this).val();
    // toggles the disabled property
    $filterButton.prop( "disabled", !is_name );
    console.log(is_name + ' is' + (!!is_name ? " " : " not ") + ' valid');
    var keycode = (e.keyCode ? e.keyCode : e.which);
    // if block wonât be executed if is_name is falsy
    if(keycode == '13' && !!is_name){
        e.preventDefault();
        myFunction();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="input-name" /><button class="filter" disabled>Do something</button>