使用javascript进行keydown时如何检查输入值是否等于特定字符串？答案

【问题标题】：How to check that value of input is equal to specific string when keydown using javascript?使用javascript进行keydown时如何检查输入值是否等于特定字符串？
【发布时间】：2017-06-27 12:59:51
【问题描述】：

我有一个包含不同字段的表单，这些字段具有不同的名称值。

我正在寻找一种方法，当您在字段中写入内容时，它将您写入的内容（当前值）与默认值进行比较，然后删除禁用的按钮。

<form id="myForm">
    <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="something" value="something" maxlength="40">
    <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="somethingelse" value="somethingelse" maxlength="40">
    <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="somethingElseElse" value="somethingElseElse" maxlength="40">
</form>

我试过类似的东西：

function onKeyUp(el) {
    var inputValue = 'I dunno what i'm supposed to put here!!!' // cant got this
    if(el.value!=inputValue) { // el.value is current value, inputValue is the default value
        $('[name="actionSave"]').removeClass('disabled');
    } else {
         $('[name="actionSave"]').addClass('disabled');
    }
}

【问题讨论】：

什么是actionSave？
禁用/启用按钮。它有效，我正在搜索如何获取任何输入的值
您需要将默认值保存在一个变量中，并在 onkeyup 函数中更新变量。
stackoverflow.com/a/1910161/3270866 这可能会有所帮助

标签： javascript jquery html input

【解决方案1】：

请检查此代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <form id="myForm">
<input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this)" name="something" value="something"
       maxlength="40">
<input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this)" name="somethingelse"
       value="somethingelse" maxlength="40">
<input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this)" name="somethingElseElse"
       value="somethingElseElse" maxlength="40">
</form>

<script>
 function onKeyUp(el) {
    var update_value = el.value;
  var  inputValue = el.getAttribute('value');
    alert(update_value+"=="+inputValue)
    if (update_value != inputValue) { // el.value is current value, inputValue is the default value
        $('[name="actionSave"]').removeClass('disabled');
    } else {
        $('[name="actionSave"]').addClass('disabled');
    }
}
</script>

【讨论】：

我发现你的代码有错误，你也可以检查一下 if (el.value != '? ? ?'){ } 像这样
inputValue 应该是输入的值^^

【解决方案2】：

您想获取目标输入的value 属性。在javascript中Element.getAttribute()属性的返回值。

function onKeyUp(el) {
  if (el.value!= el.getAttribute("value"))
    $('[name="actionSave"]').removeClass('disabled');
  else 
    $('[name="actionSave"]').addClass('disabled');    
}

function onKeyUp(el) {
  if (el.value!= el.getAttribute("value"))
    $('[name="actionSave"]').removeClass('disabled');
  else 
    $('[name="actionSave"]').addClass('disabled');    
}

.disabled { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="something" value="something" maxlength="40">
  <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="somethingelse" value="somethingelse" maxlength="40">
  <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="somethingElseElse" value="somethingElseElse" maxlength="40">
  <button name="actionSave" class="disabled">Save</button>
</form>

另外，当你使用 jQuery 时，你可以使用 jQuery 事件处理程序而不是 html 事件处理程序。

$("#myForm > input").keyup(function(){
  if (this.value != $(this).attr("value"))
    $('[name="actionSave"]').removeClass('disabled');
  else
    $('[name="actionSave"]').addClass('disabled');   
});

$("#myForm > input").keyup(function(){
  if(this.value != $(this).attr("value"))
    $('[name="actionSave"]').removeClass('disabled');
  else
    $('[name="actionSave"]').addClass('disabled');   
});

.disabled { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
    <input type="text" class="form-control name-saisie" name="something" value="something" maxlength="40">
    <input type="text" class="form-control name-saisie" name="somethingelse" value="somethingelse" maxlength="40">
    <input type="text" class="form-control name-saisie" name="somethingElseElse" value="somethingElseElse" maxlength="40">
    <button name="actionSave" class="disabled">Save</button>
</form>

【讨论】：