使用滑块提交表单后关注滑块答案

【问题标题】：Focus on slider after submitting form with slider使用滑块提交表单后关注滑块
【发布时间】：2012-12-03 21:39:11
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： javascript jquery-ui ruby-on-rails-3.2 uislider

【解决方案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>

【讨论】：