jquery : textbox enter事件

Question

这是我的HTML页面。

在这个页面中，我有一个文本框和三个按钮，如下所示。

​

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("button").css("color","green");
});
</script>
</head>
<body>

<input id="inputid" type="text">Enter</input>
<br/>
<button id="first">First</button>
<button id="second">Second</button>
<button id="three">Three</button>
</body>
</html>

​

如果我在文本框中输入"First“并输入，我希望id为"First”的按钮将css从"green“更改为"red”。

如果我在文本框中输入"First，Second“并回车，我希望id为"First”& "Second“的按钮的CSS从绿色变为红色，依此类推。

如果输入无效，则不执行任何操作。

我做了一些研究，发现我可以通过jquery的.css()方法修改css。

但是我不确定我可以使用哪个事件来处理textbox上的enter事件。

有人能帮上忙吗？

Answer 1

在chnageColor函数中，您可以使用 split ()按'，'拆分字符串，并从中创建一个数组。

使用forEach迭代该数组，并使用项目的修剪值选择按钮并将颜色更改为红色。

​

function changeColor() {
  $("button").css("color","green");
  let valArr = $('#inputid').val().split(',');
  
  valArr.forEach(m => { 
    $('#'+m.trim()).css("color", "red")
  })
}

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("button").css("color","green");
});
</script>
</head>
<body>

<input id="inputid" type="text"></input>
<button onClick='changeColor();'>Enter</button>
<br/>
<button id="first">First</button>
<button id="second">Second</button>
<button id="three">Three</button>
</body>
</html>

​

Answer 2

您需要跟踪按enter键的时间。下面是一个示例。

​

$("#inputid").keypress(function(e) {
    if(e.which == 13) {
        var inputdata = $(this).val();
        switch(inputdata){
            case "First":
            $("#first").css("color","red");
            break;

            default:
            console.log("do something when input is invalid");
            break;
        }
    }
});

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("button").css("color","green");
});
</script>
</head>
<body>

<input id="inputid" type="text">Enter</input>
<br/>
<button id="first">First</button>
<button id="second">Second</button>
<button id="three">Three</button>
</body>
</html>

​

Answer 3

​

$(document).ready(function(){
   	$("button").css("color","green");
        $('#inputid').on('keyup',function(e){
   		if(e.keyCode == 13)
   		{
   			if($(this).val() == 'First')
   			{
	   			$("#first").css("color","red");
   			}
   		}
   	});
   	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputid" type="text">Enter</input>
<br/>
<button id="first">First</button>
<button id="second">Second</button>
<button id="three">Three</button>

​