Question

如何在输入@，*， - ，_等值时，此文本框禁用play button

文本框代码/输入框代码：

<input id="nick" class="form-control input-lg no-border spaced" placeholder="Name" maxlength="15">

播放按钮代码：播放

                  <a id="spectate-btn" onclick="spectate(); return false;" class="click btn btn-warning full-width expand spaced" type="submit">Spectate</a>

Answer 1

有几件事需要考虑：

1）这是一个锚点，所以只设置disabled属性不会削减它。

2）您使用的是Vanilla JavaScript。

这是一次尝试：

var disableKeys = ['@', '*', '-', '_'];
window.onload = setEvent;

function setEvent() {
  var btn = document.getElementById('spectate-btn');
  document.getElementById("nick").onkeyup = function(c) {
    if (disableKeys.includes(c.key)) {
      btn.setAttribute('disabled', 'disabled');
      btn.className += " button-disabled";
    }
  }
}

function spectate() {
	alert("This is working!");
}

.button-disabled {
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

<input id="nick" class="form-control input-lg no-border spaced" placeholder="Name" maxlength="15">
                  <a id="spectate-btn" href="#" onclick="spectate(); return false;" class="click btn btn-warning full-width expand spaced" type="submit">Spectate</a>

请注意，这会添加一个css类来模拟按钮被禁用。我还添加了自己的功能来模拟您的旁观功能，并显示该按钮是真正禁用的。

它的工作方式我将函数挂钩在文本框的keyup事件上。每次键入一个字符时，我都检查它是否是字符（因此复制/粘贴，其他事件是您可能需要处理的特殊情况）。我有一个包含你提到的所有角色的数组。你可以为这个数组添加更多的字符。

由于你没有提及它，我不会在删除角色时处理。

Answer 2

这应该这样做，我使用正则表达式来定位没有字母字母，但你可以只指定你想要的字符并用管道（|）分隔它们因为你正在使用bootstrap，只需添加disabled，bootstrap将完成剩下的工作并为你禁用它

$('input.form-control').on( 'input', function(el){
  var str = $(this).val();
  // I'm targeting any symbol that is not letter but you can specify 
  // each char that you want,, like this: /@|*|-|+/g
  if( str.match( /[^a-z|A-Z]/g ) != null ) {
    // if match is found disable button
    $('a').attr('disabled', 'disabled') ;
  } else {
    $('a').removeAttr('disabled') ;
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="nick" class="form-control input-lg no-border spaced" placeholder="Name" maxlength="15">

<a id="spectate-btn" onclick="spectate(); return false;" class="click btn btn-warning full-width expand spaced" type="submit">Spectate</a>

在文本框中输入某些内容后禁用按钮？

2 个答案: