在 JavaScript 中使输入字段不区分大小写

Question

我的代码有问题，即：如果在输入 #search_code 中引入字母 'm'，在 #insert_code 输入中引入字母 "M"，函数 returns "is not ok"。我尝试使用 CSS text-transform: uppercase; 进行大写输入，但它不起作用。我们可以做些什么来使输入字段不区分大小写？

var search_code = document.getElementById('search_code');
var insert_code = document.getElementById('insert_code');
var result = document.getElementById('result');
var button = document.getElementById('button');
var audio = new Audio('sound.wav');


// respond to button click
button.onclick = function validate(e) {
  e.preventDefault();
  
  // show verification result:
  if (search_code.value == insert_code.value) {
    result.textContent = 'code ok';
    result.className = "ok";
    audio.play();
  } else {
    result.textContent = 'code is not ok';
    result.className = "not-ok";
  }
  // clear input when wrong:
  if (search_code.value !== insert_code.value) {
    insert_code.value = '';
  }
  return false;
};

function clearField(input) {
  input.value = "";
};

$(document).ready(function(){
      $('#search_code').bind("cut copy paste",function(e) {
          e.preventDefault();
      });
    });

...
     <form>
        <input type="text" name="search_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='introdu codul'" id="search_code" placeholder="introdu codul" autocomplete="off" value=""/><br/>
        <input type="" name="insert_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='scaneaza codul'" id="insert_code" placeholder="scaneaza codul" autocomplete="off" value=""/><br/><br/>
        <input type="submit" id="button" name="button" value="verifica COD" />
    </form>

    </div>
  <div id="result"></div>
   </div>
   <script src="js/action_input.js"></script>
 </body>
</html>

Answer 1

您应该首先将变量转换为大写或小写来检查变量的质量。你可以在比较之前使用String的"toLowerCase()"。（如果你需要不区分大小写的比较）

search_code.value.toLowerCase() == insert_code.value.toLowerCase()

Answer 2

修改您的条件检查如下

if (search_code.value.toLowerCase() == insert_code.value.toLowerCase()) {

那应该运行没有问题

Answer 3

将这些值转换为小写，以便不再区分大小写。

var search_code = document.getElementById('search_code');
var insert_code = document.getElementById('insert_code');
var result = document.getElementById('result');
var button = document.getElementById('button');
var audio = new Audio('sound.wav');


// respond to button click
button.onclick = function validate(e) {
  e.preventDefault();

  // show verification result:
  if (search_code.value.toLowerCase() == insert_code.value.toLowerCase()) {
    result.textContent = 'code ok';
    result.className = "ok";
    audio.play();
  } else {
    result.textContent = 'code is not ok';
    result.className = "not-ok";
  }
  // clear input when wrong:
  if (search_code.value.toLowerCase() !== insert_code.value.toLowerCase()) {
    insert_code.value = '';
  }
  return false;
};

function clearField(input) {
  input.value = "";
};

$(document).ready(function() {
  $('#search_code').bind("cut copy paste", function(e) {
    e.preventDefault();
  });
});

<form>
  <input type="text" name="search_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='introdu codul'" id="search_code" placeholder="introdu codul" autocomplete="off" value="" /><br/>
  <input type="" name="insert_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='scaneaza codul'" id="insert_code" placeholder="scaneaza codul" autocomplete="off" value="" /><br/><br/>
  <input type="submit" id="button" name="button" value="verifica COD" />
</form>

<div id="result"></div>

在 JavaScript 中使输入字段不区分大小写

Make input fields case insensitive in JavaScript

javascript

case-sensitive

在 JavaScript 中使输入字​​段不区分大小写

Make input fields case insensitive in JavaScript

javascript

case-sensitive

在 JavaScript 中使输入字段不区分大小写