Focus on slider after submitting form with slider

问题:

I am using the jquery ui slider and when the slider is slid, a form is submitted. The code is as follows:

<script type="text/javascript">
    $(function() {
        $( "#slider" ).slider({ 

                      min: 2000,
                      max: 2008,
                      value:<%=@epoch.start_year %>,
                      slide: function( event, ui ) {
                           $("#slider_value").html(ui.value);
                           $("form#new_epoch").submit(); 
                           }                          
        });

    });
</script>

When I move the slider to a different value, the form submits however when the page reloads the focus on the slider is lost. What I am looking to do is move the slider with the page updating everytime I move the slider, and with the slider remaining in focus. I am using the arrow keys to move the slider.

回答1:

Assuming you don't want to use ajax and load parts of HTML in the page, and you want to continue reloading the whole page, then you can set the focus on the slider handle as the page loads with $(".ui-slider-handle").focus();:

<script type="text/javascript">
$(function() {
    $( "#slider" ).slider({ 

                  min: 2000,
                  max: 2008,
                  value:<%=@epoch.start_year %>,
                  slide: function( event, ui ) {
                       $("#slider_value").html(ui.value);
                       $("form#new_epoch").submit(); 
                       }                          
    });
    $(".ui-slider-handle").focus();
});
</script>