Question

这是我的HTML页面。

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

＆＃13;

<!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>

＆＃13;

如果我输入＆＃34; First＆＃34;在文本框中输入我想要的按钮ID为＃34; First＆＃34;将它的css改为＆＃34; green＆＃34;到＆＃34;红色＆＃34;。

如果我输入＆＃34; First，Second＆＃34;在文本框中输入，我想要一个id为＃34; First＆＃34; ＆安培; ＆＃34;第二＆＃34;让他们的CSS从绿色变为红色等等。

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

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

但我不确定我可以使用哪个事件来处理文本框上的输入事件。

有人能帮忙吗？

Answer 1

在chnageColor函数中，您可以使用 split（）按＆＃39;＆＃39; 拆分字符串，然后从中创建一个数组。

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

您需要跟踪何时按下输入键。这是一个例子。

＆＃13;

$("#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;
        }
    }
});

＆＃13;

<!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>

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

使用keypress并使用密钥代码13检查是否输入。检查textbox是否包含使用indexOf匹配您的条件。

$('#inputid').keypress(function(e) {
  if (e.which == 13) {
    var txt = $(this).val();
    if (txt.indexOf('First') != -1) {
      $("#first").css("color", "green");
    }
    if (txt.indexOf('First, Second') != -1) {
      $("#first").css("color", "green");
      $("#second").css("color", "green");
    }

  }
});

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

Answer 5

<!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");
$('#inputid').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
  var idArr=$('#inputid').val().split(',');
 $.each(idArr,function(i,v){
  $('#'+v.toLowerCase().trim()).css("color","red");
 })
  }
});  
  
});
</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 6

是的，你需要使用css mehhod.Just使用split功能点击enter按钮的事件。或者如果你想输入密钥，你可以使用按键，然后通过键码13检测输入密钥以下是代码段： - 在按键上： -

＆＃13;

foreach ( $fields as $field ) {  
     $arr["number_" . $field->value] += $field->number;
}
//  Either output as array or extract values to separate variables.  

Echo $arr["number_1"];
//Or
Extract($arr);
Echo $number_1;

＆＃13;

$("#inputid").keypress(function(e) {
    if (e.which == 13) {
      var val1 = $('#inputid').val();
      if (val1){
      var valArr = $('#inputid').val().split(',');
     
     for (i=0;i<valArr.length;i++){
    $('#'+valArr[i].toLowerCase()).css("color", "red")
      }
      }
      }
     
    });

＆＃13;

和onclick事件，您可以使用如下： -

＆＃13;

<!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 id="enterBtn">Enter</button>
<br/>
<button id="first">First</button>
<button id="second">Second</button>
<button id="three">Three</button>
</body>
</html>

＆＃13;

$("#enterBtn").click(function(e) {
e.preventDefault();
  $("button").css("color","green");
  var val1 = $('#inputid').val();
  if (val1){
  var valArr = $('#inputid').val().split(',');
 
 for (i=0;i<valArr.length;i++){
$('#'+valArr[i].toLowerCase()).css("color", "red")
  }
  }
 
});

＆＃13;

Answer 7

fiddle

$(() => {
    $("button").css("color","green");
    $('#inputid').on("input",(e) => {
        $("button").css("color", "green");
        var inputValues = $('#inputid').val().split(",");

         if(inputValues.length){
            inputValues.forEach((item) => {
                 $('#'+item).css("color","red");
            });
         }
    });
})


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

Answer 8

起初我在思考＆＃34; onChange＆＃34;对你有用，但可能你希望它在表单中包围输入，然后使用onSubmit来捕获它。

w3schools上有一个页面覆盖它：https://www.w3schools.com/jsref/event_onsubmit.asp

您可以使用以下内容声明：

<form id="inputform"><input id="inputid" type="text">Enter</input></form>

$('#inputform').onsubmit = function(){ 
   // button colour-change code goes here
};

jquery：文本框的事件输入

8 个答案: