如何在窗体上保持焦点按钮和发送按钮焦点

How to keep focus button and send button focus on form?

本文关键字：按钮 焦点 窗体      更新时间：2023-09-26

  1. 我想同时选择两个按钮（颜色和大小），我希望它像这样聚焦>>在此处输入图像描述。

  2. 我想在表单上发送数据表单焦点按钮。

	function show(elementId) { 
		 document.getElementById("id1").style.display="none";
		 document.getElementById("id2").style.display="none";
		 document.getElementById("id3").style.display="none";
		 document.getElementById(elementId).style.display="block";
	}
.btn:focus{
    border-radius: 20px;
    color:#000;
}
.btn2:focus{
    border-radius: 10px;
    color:#D97476;
}
<form name="selectItem" method="POST" action="keepdata.php">
  
  <div class="select-color">
    <p>Select color</p>
    <button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
    <button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
    <button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>
  </div>
  <div class="select-option-s7">
    <p>Select Size</p>
    <button type="button" class="btn2 btn-color black" title="black">S</button>
    <button type="button" class="btn2 btn-color silver" title="silver">M</button>
    <button type="button" class="btn2 btn-color silver" title="silver">L</button>
  </div>
  
  
  <button type="submit">submit</button>
</form>

谢谢

为什么不使用输入类型="无线电"？

使用另一个具有样式的类，并使用 jquery 在单击按钮上添加类。

$('.select-color button').on('click', function(){
    $('.select-color button.selected').removeClass('selected');
    $(this).addClass('selected');
});
$('.select-option-s7 button').on('click', function(){
    $('.select-option-s7 button.selected').removeClass('selected');
    $(this).addClass('selected');
});
.selected{
  border-radius: 10px;
  color:#D97476;
}
.btn:focus{
  outline: none;
}
.btn2:focus{
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="selectItem" method="POST" action="keepdata.php">
  
  <div class="select-color">
    <p>Select color</p>
    <button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
    <button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
    <button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>
  </div>
  <div class="select-option-s7">
    <p>Select Size</p>
    <button type="button" class="btn2 btn-color black" title="black">S</button>
    <button type="button" class="btn2 btn-color silver" title="silver">M</button>
    <button type="button" class="btn2 btn-color silver" title="silver">L</button>
  </div>
  
  
  <button type="submit">submit</button>
</form>

相关文章：