텍스트 입력 기능을 호출하는 방법 키를 눌렀습니까?

Question

데이터 옵션을 필터링하는 데 사용하는 테이블 형식으로 div를 만들었습니다. 텍스트 상자 안쪽에서 Enter 키를 누르는 데 문제가 있습니다. Enter 키를 누르면 경고가 나타나지만 페이지가 다시로드되고 모든 옵션으로 올바르게 필터링되지 않습니다. 아무도 내게 무슨 일이 일어 났는지 설명 할 수 있습니까?

내가 명확하지 않거나 설명 할 필요가 있으면 알려주세요.

이 내 필터 옵션 표시 줄이 모습입니다 같은 :

HTML :

<form name="myform"> 

    <center><table id="mykeyTable" border="1" cellspacing="10" cellpadding="10"> 
    <center></center> 

</td> 


<!--Search bar --> 
    <tr> 
    <td colspan="4"> 
    <center> 
     <form> 
     Starts With: <input type="text" id="myText" value=""><br> 
     </form> 
    </center> 
    </tr> 

<!-- Site Options --> 
    <td><center>Site</center><br> 
        <input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Asc"checked> 
        <input type ='button' id='siteIDChosen' class='button-addAsc'/> 
       <br> 
        <input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Desc" > 
        <input type ='button' id='siteIDChosen' class='button-addDesc'/> 
       <br> 
     </input> 
    </form></td> 

<!-- Status options --> 

    <td><center>Status 
    <br><br></center><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)"value="Online"> Online<br><input type="radio" name="siteStatus" onclick="up\ 
dateSiteStatus(this.value)" value="Offline"> Offline<br><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)" value="Both" checked> Both </form></td\ 
> 



<!-- usage plan --> 
    <td><center>Usage Plan (in MB)</center> 
<br><input type="radio" name="usagePlan" onclick="updateUsagePlan(this.value)" value="yesUsagePlan"> Data Plan<br><input type="radio" name="usagePlan" onclick="updateUsage\ 
Plan(this.value)" value="noUsagePlan"> No Data Plan<br><input type="radio" name ="usagePlan" onclick="updateUsagePlan(this.value)" value="bothUsagePlan" checked> All Plans\ 
</form></td> 



    </table> 
<br> 
<form><input type='button' id='filter' name='Submit' onclick='validate()' class='button-add' value=" Filter Selections"/></form> 

</center> 

</form> 
</div> 

자바 스크립트 :

<script> 


$("#myText").keypress(function(event) { 
    if (event.which == 13) { 
     alert("You pressed enter"); 
    validate(); 

    } 
}); 



$(document).keypress(function(event){ 
    if(event.keyCode == 13){ 

     validate(); 
    } 
}); 




function validate() { 
//... 
} 

</script> 

---

해결 :

나는 jQuery를 버튼으로 사용 된 것과 같은 함수를 호출합니다 사용된다.

$(document).keypress(function(event){ 
    if(event.keyCode == 13){ 
    $('#filter').click(); 
     // validate(); doesn't need to be called from here 
    } 
}); 

Answer 1

나는 validate() 함수에서 오류가 발생했다고 생각합니다. validate()를 호출하고 경고 메시지가 계속 표시되는지 확인한 후에 경고를 보냅니다. 이처럼 ...

$("#myText").keypress(function(event) { 
    if (event.which == 13) { 
     validate(); 
     alert("You pressed enter"); 
    } 
}); 

Answer 2

'텍스트 입력 기능을 어떻게 호출할까요?'라는 질문에 설명 된 문제처럼 보입니다. Enter 키를 듣기 위해 적절한 이벤트를 설정했기 때문에 문제가되지 않습니다. 당신이해야 할 일은 UI를 업데이트하기 위해 validate 함수를 수정하는 것입니다. validate 함수의 첫 번째 행으로 경고를 옮기고 거기에서 이동하여 코드가 손상된 부분을 찾아냅니다.

또한 HTML이 수정 될 수있는 것처럼 보입니다. 태그는 이전 버전의 권장되지 않는 코드입니다. 중첩 된 태그를 사용할 수 없습니다. 마지막으로 태그를 제대로 닫지 않습니다. 발생한 문제는 특히 중첩 된 태그와 관련 될 수 있습니다. 브라우저에서 HTML을 수정하려고 시도하고 양식에서 보낼 매개 변수를 알 수 있습니다.

팁 : Chrome 웹 속성의 콘솔을 사용하면 코드가 깨지는 부분을 정확히 볼 수 있습니다. 보기 -> 개발자 -> 자바 스크립트 콘솔