개발자의 끄적끄적

[javascript & jquery] input에 입력 후 enter쳐서 submit하기 [펌] 본문

개발/javascript & jquery

[javascript & jquery] input에 입력 후 enter쳐서 submit하기 [펌]

효벨 2019. 11. 25. 02:00
728x90
반응형

[javascript & jquery] input에 입력 후 enter쳐서 submit하기 [펌]

 

별거 아닌거 같지만 ㅎㅎ

 

개발할때 항상 엔터쳐서 검색되거나 로그인되게 해달라는 요청이 기본적입니다 ㅎㅎ

 

그럴때 수정해서 쓰시면 되는 코드를 공유하고자 퍼왔습니다!

 

출처는 맨 아래 명시했습니다!

 

참고들하세용!!

 

 

input 박스가 하나일경우 submit 버튼을 마우스로 클릭하지 않고 enter를 쳐도 submit버튼을 누른 효과를 낼 수 있다.

 

하지만 input창이 2개 이상이 되었을 경우Enter효과는 먹히지 않는다.

 

요번엔 ID와 PW찾는 페이지를 수정하면서 input이 2개이상있는 페이지를 만들었는데

 

마케팅팀에서 input창에 텍스트 입력후

 

enter로 안간다고 귀찮으니깐Enter로 넘어갈수 있도록 수정해달라는 요구에 어쩔수 없이 강제 삽입...

 

원래 웹프로그래머들이라면 javascript를 많이 쓰는 것을 좋아하지 않지만...

 

해달라는 우째 해야지 ; _ ;...

 

방법은 다음과 같다.

 

다음과 같이 javascript를 넣으면된다.

 

//java script 시작
<script>
function press(f){
    if(f.keyCode == 13){ //javascript에서는 13이 enter키를 의미함
        formname.submit(); //formname에 사용자가 지정한 form의 name입력
    }
}
</script>

//html 시작
<form action="nextpage.php" method="post" name="formname">
        <input name="inputbox1" type="text" class="textfield" size="40" onkeypress="JavaScript:press(this.form)"> 
        <input name="inputbox2" type="text" class="textfield" size="40" onkeypress="JavaScript:press(this.form)"> 

        <button name="submitBtn" type="button" title="submit"> Submit </button>
</form>

주의) 위의 소스에서 11번 라인을 보면 html의 formname과 javascript에서의 formname은 같아야한다.

 

출처 : https://88240.tistory.com/52[shaking blog]

 

반응형
Comments