Question

在我的HTML页面中，我有一个文本字段，其中显示了一个提示，并为其指定了一个文本更改事件（在用户停止键入1秒后有效）。

但我不能让他们一起工作。

我希望在输入字段中文本更改时发生RunSearch函数。但是当文本为空字符串或提示字符串时，它需要忽略。但是，当我专注于该字段时，文本从提示变为空字符串，触发文本更改事件，从第一个函数执行else块，当您关注时我不希望发生或模糊，新文本为空或搜索提示。

当您聚焦或模糊输入字段，并且由于焦点或模糊事件而新文本为空或搜索提示时，是否有办法可以阻止文本更改事件发生？

感谢。

function InitSearchBox(searchBoxID, searchButtonID, scope, searchLimit, treeviewID, searchErrorMessageBoxID, searchHint) {

    // initializes the search button so it does the same thing as stop typing in the search box
    $("#" + searchButtonID).click(function () {
        var text = $("#" + searchBoxID).val();
        alert(text);
        if (text != "" && text != searchHint) {
            RunSearch(text, scope, searchBoxID, searchLimit, treeviewID, searchErrorMessageBoxID);
        } else {
            $("#" + searchErrorMessageBoxID).html("");
            RevealAllNodesOnTreeview(treeviewID);
        }
    });

    // this part will make it so that after 1 second after the user stops typing in the search box, it will run the search request
    var PDFSearchBoxTimeout = null;
    $("#" + searchBoxID).bind("propertychange input", function () {
        if (PDFSearchBoxTimeout !== null) {
            clearTimeout(PDFSearchBoxTimeout);
        }
        PDFSearchBoxTimeout = setTimeout(function () {
            $("#" + searchButtonID).click();
        }, 1000);
    });
}


function SetSearchBoxHint(searchHint, searchInputBoxID) {

    // get the search box element
    var my_element = $("#" + searchInputBoxID);

    // this part occurs when you focus/blur on the search box, and will change its text and text colour depending on the scenario
    $(my_element).focus(function () {
        if ($(this).val() == searchHint) {
            $(this).val("").css({ "color": "black" });
        }
    });

    $(my_element).blur(function () {
        if ($(this).val() == '') {
            $(this).val(searchHint).css({ "color": "gray" });
        }
    });

    // force the blur to occur on the search box
    $(my_element).blur();
}

更新

function SetSearchBoxHint(searchHint, searchInputBoxID) {

    // get the search box element
    var my_element = $("#" + searchInputBoxID);

    // this part occurs when you focus/blur on the search box, and will change its text and text colour depending on the scenario
    $(my_element).focus(function () {
        if ($(this).val() == searchHint) {
            $(my_element).prop('disabled', true);
            $(this).val("").css({ "color": "black", "font-style": "normal" });
            $(my_element).prop('disabled', false);
        }
    });

    $(my_element).blur(function () {
        if ($(this).val() == "") {
            $(my_element).prop('disabled', true);
            $(this).val(searchHint).css({ "color": "gray", "font-style": "italic" });
            $(my_element).prop('disabled', false);
        }
    });

    // force the blur to occur on the search box
    $(my_element).blur();
}

Answer 1

试试这个：

$(document).ready(function(){
    $("my_element").keyup(function(){
        // your code
    })
})

您可以使用文本框的键盘事件，这样当文本框为空时它不会触发，因此您也可以放置占位符。

如何让textfield提示和文本更改工作完美？

1 个答案: