How do I make it so this textbox disables the play button upon inputting values of @ ,*, -, _, etc.
Text Box Code / Input Box Code:
<input id="nick" class="form-control input-lg no-border spaced" placeholder="Name" maxlength="15">
Play Button Code : Play
<a id="spectate-btn" onclick="spectate(); return false;" class="click btn btn-warning full-width expand spaced" type="submit">Spectate</a>
There are a few things to consider:
1) This is an anchor, so just setting the disabled attribute is not gonna cut it.
2) You are using Vanilla JavaScript.
Here is an attempt:
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>Notice that this adds a css class to simulate the button is disabled. I also added my own function to simulate your spectate function, and to show the button is truly disabled.
The way it works I hook the function on the keyup event of the textbox. Every time a character is typed I check was character it is (so copy/paste, and other events are special cases that you might have to handle). I have an array with all of the characters you mention. You could add more chars to this array.
Since you don't mention it, I do not handle when the character is removed.
This should do it,, I've used regex to target no alpha letters, but you can specify only chars that you want and delimit them with pipe ( | )
Because you are using bootstrap, just add disabled and bootstrap will do the rest and disable it for you
$('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>