javascript - 使用滑块提交表单后关注滑块

Question

我正在使用 jquery ui 滑块，当滑块滑动时，会提交一个表单。代码如下：

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

当我将滑块移动到不同的值时，表单会提交，但是当页面重新加载时，滑块上的焦点会丢失。我要做的是移动滑块，每次我移动滑块时页面都会更新，并且滑块保持焦点。我正在使用箭头键来移动滑块。

Answer 1

假设您不想使用 ajax 并在页面中加载部分 HTML，并且您想继续重新加载整个页面，那么您可以在页面加载时将焦点设置在滑块句柄上$(".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>