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

Question

I have a html form with multiple questions that user need to answer, I want to add some style as : when the user clicks a question I want it to be focused and blur the other questions, how should I approach this.

Here is the form I made,but I wan to change the opacity of the div when clicked on the input field please suggest how to approach this.

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

You should have dedicated Id for each div(each question will be inside a div i suppose). Later use focus and blur events of javascript based on id

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

You can also populate an array containing id of those questions and iterate a loop to focus and blur

Answer 2

Hi I would use JQuery to to add a class eg.focused on to the question the user is on, and all the other ones you would add another class eg.non-focused.

JQuery to add class to selected div

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

now in then add all the other div you add class non-focused

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

so you would have and html layout similar to this

<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

so your function would look like this

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

now you add the styling for it

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

and for focused

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

and you should be set.

let me know if you have any problems.

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

Question

2 answers

solution1
0 2016-09-29 08:57:18

solution2
0 2016-09-29 09:05:06

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

Question

2 answers

solution1 0 2016-09-29 08:57:18

solution2 0 2016-09-29 09:05:06

solution1
0 2016-09-29 08:57:18

solution2
0 2016-09-29 09:05:06