用滑块提交表单后，将焦点放在滑块上 [英] Focus on slider after submitting form with slider

问题描述

我正在使用jquery ui滑块，并且当滑块滑动时，将提交一个表单.代码如下:

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.

推荐答案

假设您不想使用Ajax并在页面中加载部分HTML，并且您想继续重新加载整个页面，则可以设置页面加载$(".ui-slider-handle").focus();时，将焦点放在滑块手柄上:

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>

这篇关于用滑块提交表单后，将焦点放在滑块上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！