如何在HTML表单中聚焦当前选择

How do I focus the current selection in a HTML form?

本文关键字：聚焦 选择 表单 HTML      更新时间：2023-09-26

我有一个html表单，用户需要回答多个问题，我想添加一些样式:当用户单击一个问题时，我想让它集中并模糊其他问题，我应该如何处理这个。

这是我做的表单，但我想改变div的不透明度时点击输入字段，请建议如何处理这个

$(document).on('focus active', 'input, textarea', function(){
                    $('label[for='+$(this).attr('id')+']').addClass('active');
                });
                $(document).on('blur', 'input, textarea',function(){
                    $('label[for='+$(this).attr('id')+']').removeClass('active');
                });
input[type=text], input[type="email"],input[type="number"] {
    width: 50%;
    display: block;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #ccc;
}
            input:focus {
    outline: none;
}
div {
    opacity: 0.5;
}
.active{
    font-size: 50px;
    color: darkgray;
    opacity: 1 px !important;
}
<!doctype html>
<body>
    <head>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
      </script>
         </head>
            <div>
                <label for="contact_form_name"><span class="qno">1.</span> What is your name?*</label>
                <input id="contact_form_name" name="contact_form_mail" type="text">
            </div>
            <div>
                <label for="contact_form_phone"><span class="qno">2.</span>What is your contact number?*</label>
                <input id="contact_form_phone" name="contact_form_phone" type="number">
            </div>
            <div>
                <label for="contact_form_email"><span class="qno">3.</span>What is your email address?**</label>
                <input id="contact_form_email" name="contact_form_email" type="email">
            </div>
            <div>
                <label for="contact_form_city"><span class="qno">4.</span>Which city do you live in?*</label>
                <input id="contact_form_city" name="contact_form_city" type="text">
            </div>
           
</body>

您应该为每个div(我假设每个问题将在一个div中)设置专用Id。之后使用基于id

的javascript焦点和模糊事件
document.getElementById("your_id").blur();
document.getElementById("your_id").focus();

您还可以填充包含这些问题id的数组，并迭代循环以聚焦和模糊

嗨，我将使用JQuery来添加一个类。专注于用户所关注的问题，而所有其他问题，你可以添加另一个类，例如，非专注。

JQuery添加类到选定的div

$(this).addClass('focused');

现在添加所有其他div你添加类非聚焦

$('class_name_of_all_div').addClass('focused');

所以你会有一个类似于

的HTML布局
<div class="question">
    <input type="text" name="name" >Name</input>
</div>
<div class="question">
    <input type="text" name="name" >Name</input>
</div
<div class="question">
    <input type="text" name="name" >Name</input>
</div

那么你的函数就是这样的

$(".question").click(function() {
     $(this).addClass('focused');
     $('.question').addClass('focused');
});

现在为它添加样式

.non-focused {
     filter: blur(2px);
}

和

.non-focused {
     filter: blur(0px) !important;
}

和你应该设置。

如果你有任何问题请告诉我。
相关文章：