Question

我有一个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>

Answer 1

你应该为每个div都有专用的ID（每个问题都在我认为的div内）。稍后使用基于id的JavaScript的焦点和模糊事件

document.getElementById("your_id").blur();
document.getElementById("your_id").focus();

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

Answer 2

您好我会使用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;
}

你应该被设置。

如果您有任何问题，请告诉我。

如何将当前选择集中在HTML表单中？

2 个答案: