텍스트 상자의 Enter 키에 javaScript를 사용하여 버튼을 트리거합니다.

Question

하나의 텍스트 입력과 하나의 버튼이 있습니다 (아래 참조). JavaScript를 어떻게 사용할 수 있습니까? 버튼의 클릭 이벤트를 트리거하십시오 때 입력하다 텍스트 상자 안에 키가 눌려 있습니까?

현재 페이지에 이미 다른 제출 버튼이 있으므로 버튼을 제출 버튼으로 만들 수는 없습니다. 그리고 나 뿐 원한다 입력하다 이 특정 버튼 이이 하나의 텍스트 상자 내에서 누르면 아무것도 눌렀을 때이 특정 버튼을 클릭합니다.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 1

jQuery에서는 다음이 작동합니다.

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

또는 평범한 JavaScript에서는 다음이 작동합니다.

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Answer 2

그런 다음 코드로 코딩하십시오!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

Answer 3

이것을 알아 냈습니다.

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

Answer 4

버튼을 제출 요소로 만듭니다.

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

당신은 필요합니다 <form> 이 작업을 수행하기위한 입력 필드를 포함하는 요소 (Sergey Ilinsky에게 감사합니다).

표준 행동을 재정의하는 것은 좋은 관행이 아닙니다. 입력하다 키는 항상 양식에서 제출 버튼을 호출해야합니다.

Answer 5

아무도 사용하지 않았기 때문에 addEventListener 그러나 여기 내 버전이 있습니다. 요소가 주어지면 :

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

다음을 사용합니다.

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

이를 통해 HTML을 깨끗하게 유지하면서 이벤트 유형과 작업을 개별적으로 변경할 수 있습니다.

메모 이것이 이것이 바깥에 있는지 확인하는 것이 가치가있을 것입니다 <form> 이 요소를 동봉했을 때 Enter를 누르면 양식을 제출하고 페이지를 다시로드했기 때문입니다. 발견하기 위해 몇 가지 깜박임을했습니다.

부록: @Ruffin의 의견 덕분에 누락 된 이벤트 핸들러와 preventDefault 이 코드가 (아마도) 양식 내부에서도 작동하도록합니다. (나는 이것을 테스트 할 것입니다. 그 시점에서 나는 괄호가있는 콘텐츠를 제거 할 것입니다.)

Answer 6

평범한 자바 스크립트에서

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

나는 답장이 jQuery로만 주어진다는 것을 알았으므로 평범한 JavaScript로 무언가를주는 것을 생각했습니다.

Answer 7

내가 완전히 언급하지 않은이를 위해 사용할 수있는 기본 트릭 중 하나입니다. Ajax 조치를 취하거나 Enter에 대한 다른 작업을 수행하고 싶지만 실제로 양식을 제출하고 싶지 않다면 다음을 수행 할 수 있습니다.

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

Action 설정 = "JavaScript : void (0);" 이와 같이 기본 동작을 본질적으로 방지하기위한 바로 가기입니다. 이 경우에 Enter를 누르거나 버튼을 클릭하는지 여부에 관계없이 메소드가 호출되며 일부 데이터를로드하기 위해 Ajax 호출이 이루어집니다.

Answer 8

시도 해봐:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

Answer 9

Enter 키를 누를 때마다 검색을 트리거하려면 다음을 사용하십시오.

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

Answer 10

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

이것은 내가 다소 최근의 프로젝트에서 가지고있는 것입니다 ... 나는 인터넷에서 그것을 발견했고, 더 나은 방법이 있는지, 평범한 오래된 JavaScript가 있는지 전혀 모른다.

Answer 11

비록 양식에 하나의 필드와 하나의 제출 버튼 만있는 한 페이지에 다른 양식이 있더라도 Enter를 치는 것이 양식을 제출해야한다고 확신합니다.

그런 다음 JS와 함께 OnSubmit 양식을 캡처하고 원하는 유효성 검사 또는 콜백을 수행 할 수 있습니다.

Answer 12

이것은 모든 것을위한 해결책입니다 유아 거기에 연인들 :

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

이 특별한 경우에는 버튼 기능이 주입 된 DOM 객체를 트리거하기 위해 Yui를 사용한 더 나은 결과를 얻었습니다. 그러나 이것은 또 다른 이야기입니다 ...

Answer 13

~ 안에 Angular2:

(keyup.enter)="doSomething()"

버튼에서 시각적 피드백을 원하지 않으면 버튼을 참조하지 않고 컨트롤러를 직접 호출하는 것이 좋습니다.

또한 ID는 필요하지 않습니다. 뷰와 모델을 분리하는 또 다른 NG2 방법.

Answer 14

아무도 HTML Attribute "Accesskey"를 눈치 채지 못했습니다.

이것은 키보드 바로 가기를위한 JavaScript 방법이 아닙니다.

AccessKey는 MDN의 단축키가 있습니다

이렇게 사용되도록 의도했습니다. HTML 속성 자체는 충분합니다. 하우 위은 브라우저 및 OS에 따라 자리 표시 자 또는 기타 표시기를 변경할 수 있습니다. 스크립트는 아이디어를 제공하기위한 테스트되지 않은 스크래치 접근법입니다. Tiny와 같은 브라우저 라이브러리 탐지기를 사용하고 싶을 수도 있습니다. Bowser

let client = navigator.userAgent.toLowerCase();
    isLinux = client.indexOf("linux") > -1;
    isWin = client.indexOf("windows") > -1;
    isMac = client.indexOf("apple") > -1;
    isFirefox = client.indexOf("firefox") > -1;
    isWebkit = client.indexOf("webkit") > -1;
    isOpera = client.indexOf("opera") > -1;
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

Answer 15

사용 keypress 그리고 event.key === "Enter" 현대 JS와 함께!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

모질라 문서

지원되는 브라우저

Answer 16

이것 onchange 시도는 가깝지만 브라우저와 관련하여 오작동은 앞으로 앞으로 (Safari 4.0.5 및 Firefox 3.6.3에서) 오작동합니다. 궁극적으로는 권장하지 않을 것입니다.

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 17

이 사례는 또한 게시에서 서버로 Enter 버튼을 디아블하고 JS 스크립트를 실행합니다.

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 18

event.returnValue = false

이벤트를 처리 할 때 또는 이벤트 핸들러가 호출 할 때 사용하십시오.

인터넷 익스플로러와 오페라에서는 적어도 작동합니다.

Answer 19

jQuery Mobile의 경우해야했습니다

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});

Answer 20

해결 된 완전히 평범한 JavaScript 솔루션을 추가합니다 @Icedwater의 양식 제출 문제, 여기에 완전한 솔루션이 있습니다 ~와 함께 form.

노트: 이것은 IE9+를 포함한 "현대식 브라우저"를위한 것입니다. IE8 버전은 훨씬 더 복잡하지 않으며 여기서 배웠습니다.

---

깡깡이: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

자바 스크립트

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

Answer 21

document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

그녀는 내 두 센트입니다. Windows 8 용 앱에서 작업 중이며 Enter 버튼을 누를 때 클릭 이벤트를 등록하는 버튼을 원합니다. 나는 JS에서 이것을하고있다. 몇 가지 제안을 시도했지만 문제가있었습니다. 이것은 잘 작동합니다.

Answer 22

jQuery와 함께하기 위해 :

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

정상적인 JavaScript로 수행하려면 :

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

Answer 23

현대적으로는 외부에서 (없이 keyCode 또는 onkeydown) JavaScript :

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

Answer 24

간결함과 현대식 JS 접근을 좋아하는 사람들을 위해.

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

어디 입력 입력 요소를 포함하는 변수입니다.

Answer 25

jQuery에서는 사용할 수 있습니다 event.which==13. 당신이있는 경우 form, 당신은 사용할 수 있습니다 $('#formid').submit() (올바른 이벤트 청취자가 상기 양식의 제출에 추가되었습니다).

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>

Answer 26

이것은 또한 작은 JavaScript 함수 인 도움이 될 수 있습니다.

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

나는이 질문이 해결된다는 것을 알고 있지만 방금 다른 사람들에게 도움이 될 수있는 것을 발견했습니다.