텍스트 필드 힌트와 텍스트 변경을 완벽하게 처리하는 방법은 무엇입니까?

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 
    }) 
}) 

당신은 텍스트 상자의 이벤트의 keyup 사용할 수 있습니다 잘.