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

Posted 2023-03-13

【中文标题】使用滑块提交表单后关注滑块

【英文标题】：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>

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

【参考方案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>