javascript - 使用 slider 提交表单后关注 slider

Question

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

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

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

Answer 1

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