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

Question

I have a problem with my code, namely: If in input #search_code I introduce letter 'm' and in #insert_code input I introduce letter "M", function returns "is not ok". I tried to make uppercase inputs with CSS text-transform: uppercase; but it does not work. What can we do to make input fields case insensitive?

 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

You should be checking the variables for quality by first converting them into either upper or lower case. You can use String's "toLowerCase()" before comparisions.(If you need case insensitive comparision)

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

Answer 2

Modify your condition check to as below

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

That should make it run with no issues

Answer 3

Convert those values to be compared to lowercase so that case sensitivity is no longer an issue.

 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>