Enter 키를 눌러 이벤트에서 JavaScript

https://stackoverflow.com/questions/905222

05-09-2019
|

문제

나 form 을 가진 두 개의 텍스트 상자를,하나는 선택 아래로 떨어지고 하나 라디오 버튼.면 입력 키를 누를 때,나는 통화 자바스크립트 기능(사용자 정의됨),그러나 누를 때,그 양식이 제출됩니다.

지 못하게 하는 방법은 무엇입니까 form 부터 제출되는 경우 입력 키를 누르면?

해결책

if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

그래,그래서 당신이 다음과 같은 텍스트 상자에서 형태:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

실행하기 위해 약간의"사용자 정의"스크립트에서 이 텍스트 상자를 때 enter 키를 누를 필요가 없고,그것을 제출 양식,다음은 몇몇 sample 코드입니다.이 기능을 수행하지 않는 오류를 검사하고 대부분에서만 작동합니다 IE.이를 위해 오른쪽 당신이 필요 더 강력한 솔루션이지만,당신을 얻을 것이 일반적인 아이디어.

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

의 값을 반환 기능을 경고하는 이벤트를 처리하지 않는 거품의 이벤트가 어떠한 추가하지 않고,의 키 누르기 이벤트에서 처리되고 있다.

참고:

그것은이 지적되는 keyCode 가 이제 사용되지 않는.다음 최고의 대안 which 가 또한 사용 되지 않습니다.

불행하게도들이 가장 선호하는 표준 key, 는 광범위하게 지원하여 현대적인 브라우저,몇몇 사기 행위,즉에서 가장자리.무엇보다 이전 IE11 여전히 필요 polyfill.

또한 동안 사용되지 않는 경우 경고를 매우 불길에 대 keyCode 고 which, 제거,그 것을 나타내는 대규모 파괴 변화를 말할 수 없는 숫자의 유산이다.그 이유를 들어, 그것은 그들은 언제 어디서나다.

다른 팁

둘 다 사용하십시오 event.which 그리고 event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};

jQuery를 사용하는 경우 :

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});

event.key === "Enter"

보다 최근의 더 깨끗한 : 사용 event.key. 더 이상 임의의 숫자 코드가 없습니다!

const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

모질라 문서

지원되는 브라우저

전체 문서에서 Enter 키 감지 키를 누릅니다.

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

재정의 onsubmit 액션의 양식을 통해 귀하의 기능을 추가 false 를 반환한 후,즉:

<form onsubmit="javascript:myfunc();return false;" >

React JS 솔루션

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>

Prully Java 스크립트를 사용하여 수행하려면 여기에 완벽하게 작동하는 예입니다.

이것이 HTML 파일이라고 가정 해 봅시다

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

당신의 팝업 .js 파일이 기능 만 사용하십시오

var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        alert("yes it works,I'm happy ");
    }
});

아래 코드는 리스너를 추가합니다 ENTER 전체 페이지의 키.

이것은 단일 조치 버튼이있는 화면에서 매우 유용 할 수 있습니다. 예를 들어 로그인, 등록, 제출 등.

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

모든 브라우저에서 테스트.

따라서 가능한 많은 브라우저를 다루고 미래의 증거가 될 수있는 최상의 솔루션은

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")

jQuery 솔루션.

나는 텍스트 입력의 블러 이벤트가 시작될 때까지 양식 제출을 지연시키는 방법을 찾고 여기에 왔습니다.

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

양식 제출이 아닌 모든 지연된 이벤트를 해고 한보다 일반적인 버전을 얻는 것이 좋을 것입니다.

내 관점에서 훨씬 간단하고 효과적인 방법은 다음과 같습니다.

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}

TypeScript 사용 및 함수의 배수 호출을 피하십시오.

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}

기본 JS (Fetch API)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();

<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">

조금 간단합니다

Keypress "Enter"에서 양식을 보내지 마십시오.

<form id="form_cdb" onsubmit="return false">

Keypress "Enter"에서 함수를 실행하십시오.

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">

<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>

이 기능 preventKey() 감가 상각 된 브라우저 기능에 관계없이 작동합니다.

세 가지 속성 중 하나만 which (감가 상각), keyCode (감가 상각) 또는 key (IE의 문제)가 있어야합니다.

https://jsfiddle.net/tobiobeck/z13dh5r2/

function preventKey(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {

  if (preventKey(event, 'Enter', 13)) {
    event.preventDefault();
  }
});

HTML

<form>
  <input id="myInput">
</form>

브라우저 테스트

다른 브라우저를 수동으로 댓글을 달거나 타협하는 경우 다음 세 가지 중 하나를 테스트하려는 경우 event.something 윤곽:

var event = {};
event.which = 13;
//event.keyCode = 13;
//event.key = 'Enter'

if (preventKey(event, 'Enter', 13)) {
  console.log('enter was pressed');
}

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow