javascript - Focus is running before the click/change of a radio button. Is it possible to run the click/change before the focus? -
below see code working on , included jsfiddle.
issue:
- the focus running before click/change margin moving before radio button can selected.
please explain code can learn this. if not have solution hints or direction helpful. in advance!
http://jsfiddle.net/nlgqhqwc/6/
html
<div class="panel"> <input type="text"/> </div> <div class="panel"> <input type="text"/> </div> <div class="panel"> <select> <option>option</option> </select> </div> <div class="panel"> <input type="radio"/> </div> <div class="panel"> <input type="checkbox"/> </div>
css
.panel{ padding:15px; background:grey; margin-bottom:15px; } .panel-primary{ margin:0 15px 0 15px; background:blue; margin-bottom:15px; }
jquery
$(document).ready(function () { $('.panel').click(function () { event.stoppropagation(); $('.panel').removeclass('panel-primary'); $(this).addclass('panel-primary'); }); $('input, select').bind('focus blur', function (event) { event.stoppropagation(); $('.panel').removeclass('panel-primary'); $(this).closest(".panel").addclass('panel-primary'); }); $('input[type=radio]').change(function () { event.stoppropagation(); $('.panel').removeclass('panel-primary mrgn-lft-lg'); $(this).closest(".panel").addclass('panel-primary'); }); });
you can fire event when user goes on .panel
. have replace click:
$('.panel').click(function () {
with click or hover mouse
. that's way:
$('.panel').on('click mouseover',function () {
and here example fiddle: http://jsfiddle.net/nlgqhqwc/10/
another way
when not focused, make padding wider. way .panel
's content not move (and user can click easily) , margin still there:
.panel{ padding:15px 30px; } .panel-primary { margin:0 15px 0 15px; padding: 15px; }
Comments
Post a Comment