Question

我有一个输入，意味着在加载时专注于它，但它不会保持专注。您可以看到它会在加载时聚焦，但很快就会恢复到原来的“未聚焦”状态。我使用的JQuery代码是：

$(document).ready(function() {
$("#searchinput").addClass("lightIn").val("Enter a car..").focus();
$("#searchinput").on("keyup",function (event) {
    event.preventDefault();
    var qdata=$("#searchinput").val();
    $("#results").load("search.php", {query: qdata}, function(response, status, xhr){
        if (status == "error") {
            alertify.alert("There has been an error, please refresh and try again!");
        }
    });
    return false;
}).on("keydown", function (event) {
    if ($(this).hasClass("lightIn"))
    {
        $(this).removeClass("lightIn").val("");
    }
}).on("blur",function () {
    $("#find").removeClass("select");
    if ($(this).val()=="")
    {
        $(this).addClass("lightIn").val("Enter a car..");
    };
});
$("#searchgo").on("click",function (event) {
    event.preventDefault();
    var qdata=$("#searchinput").val();
    $("#results").load("search.php", {query: qdata}, function(response, status, xhr){
        if (status == "error") {
            alertify.alert("There has been an error, please refresh and try again!");
        }
    });
return false;
});

});

网站 - http://joshblease.co.uk/JQuery/find.php

到目前为止，我正在使用Chrome进行测试

Answer 1

好吧，不妨回答一下。

您的输入HTML：

<input id="searchinput" class="transparent" placeholder="Enter a car..." autofocus />

你新的更高效的jQuery：

var $searchinput = $('#searchinput');

function returnResults(qdata,e){
    e.preventDefault();
    $('#results').load('search.php', {query: qdata}, function(response, status, xhr){
        if (status == "error") {
            alertify.alert("There has been an error, please refresh and try again!");
        }
    });
}    

$searchinput.on({
    keyup:function(e) {
        returnResults($(this).val(),e);
    },
    keydown:function() {
        if ($(this).hasClass("lightIn")) {
            $(this).removeClass("lightIn").val("");
        }
    },
    blur:function() {
        $("#find").removeClass("select");
    }
});

$("#searchgo").on("click",function(e) {
    returnResults($searchinput.val(),e);
});

这对于IE9 +和所有真正的浏览器都会非常出色。保存IE8的占位符JS解决方案 - 。

JQuery没有将注意力集中在负载上

1 个答案: