javascript - 使用 jquery 在其值之后聚焦文本字段

Question

我制作了一个表格，您可以在其中从下拉菜单中选择一个选项。When an option is selected a value is set for the textfield. 我还希望发生的是它专注于值之后的那个文本字段。例如：我从下拉列表中选择 facebook，“ http://www.facebook.com/ ”作为文本字段的值出现。选择 facebook 时，焦点也会转到已添加值的最后一个字符之后的文本字段。

我用我目前拥有的东西做了一个 JSFiddle：

http://jsfiddle.net/dgUrj/

JS：

$(document).ready(function() {
    //Add the right URL prefix for social media
    $('select').change(function() {
        console.log(this.value);
        if(this.value == "Facebook"){
         $('#social-url').val("http://www.facebook.com/");
        }
        if(this.value == "Twitter"){
         $('#social-url').val("http://www.twitter.com/");
        }
        if(this.value == "LinkedIn"){
         $('#social-url').val("http://www.linkedin.com/");
        }
    });

});

Answer 1

只需focus()在设置值后添加触发器，如下所示：

$('#social-url').val("http://www.twitter.com/").focus();

这是我的做法：

$(document).ready(function() {
    $('select').on('change', function() {
         $('#social-url').val("http://www." + this.value.toLowerCase() + ".com/")
                         .focus();
    });
});

小提琴

Answer 2

可以像这样简单地完成：

看演示

$(document).ready(function() {
    //Add the right URL prefix for social media
    $('select').change(function() {
        console.log(this.value);
        if(this.value == "Facebook"){
         $('#social-url').val("http://www.facebook.com/");
        }
        else if(this.value == "Twitter"){
         $('#social-url').val("http://www.twitter.com/");
        }
        else if(this.value == "LinkedIn"){
         $('#social-url').val("http://www.linkedin.com/");
        }

        if(this.value) $('#social-url').focus();
    });

});

Answer 3

只需将其放在您的 if 语句之后，它会在下拉选择发生后自动关注文本框。

   $('#social-url').focus();

所以在您的代码中将如下所示：

$(document).ready(function() {
    //Add the right URL prefix for social media
    $('select').change(function() {
        console.log(this.value);
        if(this.value == "Facebook"){
         $('#social-url').val("http://www.facebook.com/");
        }
        if(this.value == "Twitter"){
         $('#social-url').val("http://www.twitter.com/");
        }
        if(this.value == "LinkedIn"){
         $('#social-url').val("http://www.linkedin.com/");
        }
         $('#social-url').focus();
    });

});

演示：http: //jsfiddle.net/dgUrj/2/