Question

jQuery焦点似乎导致Internet Explorer 9执行两次。在旧版本的IE中不会发生此问题，并且在Firefox或Chrome中不会发生此问题。

我让用户在输入字段中输入代码。在输入或提交代码时，通过加载将代码发送到另一个脚本（ajax）。删除输入字段中的代码，并重新调整焦点。

该脚本的结果将插入到同一页面上的div中。

    $(document).ready(function(){
        $('#code').keyup(function(e){
            if(e.keyCode == 13){
                console.log('Code submitted through enter');
                sendcode($('#code').val());
            }
        });

        function sendcode(b){
            console.log('function sendcode used');
            $('#Result').load('scan.php?code=' + b);
            $('#code').val('');
            $('#code').focus();
        };

        $('#Submit').click(function(){
            console.log('Code submitted through click');
            sendcode($('#code').val());
        });
    });

然而，焦点（）似乎是问题，因为当我删除它时，问题就消失了。我已经尝试将焦点（）放在代码的任何位置但没有成功。是否有任何替代的focus（）实现相同或可以某种方式修复？

NETWORK:

URL: /scan.php?code=stackoverflow
URL: /scan.php?code=

CONSOLE: (when hit enter)
Log: Code submitted through click 
Log: function sendcode used 
Log: Code submitted through enter 
Log: function sendcode used

您可以看到第二个加载也没有携带代码变量。

Answer 1

将Submit按钮更改为span或div并为其设置样式。

<span id="Submit">Submit</span>

演示：Fiddle

您还可以查看this answer，其中建议在按钮元素中添加属性type="button"。

Answer 2

    function sendcode(b){
        if(b){
            console.log('function sendcode used');
            $('#Result').load('scan.php?code=' + b);
            $('#code').val('');
            $('#code').focus();
        }
    };

这些方面应该有所作为。也许如果b != undefined或类似的东西。只要确保B在那里。

Answer 3

将函数放在doc ready之外，试试这个：

function sendcode(b){
  $('#Result').load('scan.php?code=' + b);
  $('#code').val('');
  $('#code').focus();
}

$(document).ready(function(){
    $('#code').keyup(function(e){
        if(e.keyCode == 13){
            sendcode($('#code').val());
        }
    });

    $('#Submit').click(function(){
        sendcode($('#code').val());
    });
});

或试试这个：

.load()是jquery的ajax方法之一，所以你必须停止提交表单，否则页面会被刷新。

$('#Submit').click(function(e){
    e.preventDefault();
    sendcode($('#code').val());
});

Answer 4

不要拦截击键，除非你真的，真的是这个意思。当然不要模仿跨度的按钮！除了span和div之外，HTML还有标签。

你的问题可以说是一个IE漏洞，但是你可以通过内置行为来解决这个问题。您只需要在提交表单时触发的一个事件处理程序。

$(document).ready(function(){
    function sendcode(b){
        console.log('function sendcode used');
        $('#Result').load('scan.php?code=' + b);
        $('#code').val('');
        $('#code').focus();
    };

    $('#form').submit(function(e) {
        e.preventDefault();
        sendcode($('#code').val());

    });
});

然后，坦率地说，你可以拥有一个不依赖于JavaScript的更易于访问的表单，以及更加可重用的代码：

$(document).ready(function(){
    $('#form').submit(function(e) {
        e.preventDefault();

        var $form = $(this);
        var data = $form.serialize();
        var action = $form.attr('action');
        $('#result').load(action + '?' + data);

        $('#code').val('').focus();
    });
});

现在，URL存在于表单的action属性（表单的目标URL所在的位置），JS将捆绑表单值，如浏览器和ajax-为您提交表单。如果用户已禁用JS，则表单将正常提交，他们仍会获得有用的结果，尽管在新页面中。代码更短，URL转义问题将由您负责，并且硬编码值更少。

jQuery focus（）导致.load（）在IE9中执行两次

4 个答案: