Bir metin girişi ve bir düğme var (aşağıya bakın). Nasıl için JavaScript kullanabilirsiniz düğmenin tıklama etkinliğini tetiklemek zaman Enteranahtar metin kutusunun içine basılır?

Geçerli sayfamda zaten farklı bir gönderme düğmesi var, bu yüzden düğmeyi bir gönderme düğmesi yapamıyorum. Ve sadeceEnter bu tek bir metin kutusundan basılırsa anahtarın bu düğmeyi tıklamasını istiyorum, başka bir şey yok.

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

JQuery'de aşağıdakiler işe yarar:

$("#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>

Veya açık JavaScript'te aşağıdakiler işe yarar:

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>

Sonra sadece kod!

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

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

Bunu anladım:

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

Düğmeyi bir gönderme öğesi yapın, böylece otomatik olur.

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

<form>Bu işi yapmak için giriş alanlarını içeren bir öğeye ihtiyacınız olacağını unutmayın (teşekkürler Sergey Ilinsky).

Standart davranışı yeniden tanımlamak iyi bir uygulama değildir, Enteranahtar her zaman formdaki gönder düğmesini çağırmalıdır.

Henüz kimse kullanmadığından addEventListener, benim versiyonum. Öğeler göz önüne alındığında:

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

Aşağıdakileri kullanırdım:

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

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

Bu, HTML'yi temiz tutarken etkinlik türünü ve eylemini ayrı olarak değiştirmenize olanak tanır.

Bunun dışında <form>kaldığından emin olmanın faydalı olduğunu unutmayın , çünkü bu öğeleri onlara eklediğimde Enter tuşuna basarak formu gönderdikten sonra sayfayı yeniden yükledim. Keşfetmem için birkaç kez yanıp söndü.

Ek : @ruffin tarafından yapılan bir yorum sayesinde, eksik olay işleyicisini ekledim ve preventDefaultbu kodun (muhtemelen) bir form içinde çalışmasına izin vermek için. (Bunu test etmeye başlayacağım, bu noktada parantez içindeki içeriği kaldıracağım.)

Açık JavaScript'te,

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

Yanıtın sadece jQuery'de verildiğini fark ettim, bu yüzden düz JavaScript'te bir şey vermeyi düşündüm.

Tam olarak bahsetmediğim, bunun için kullanabileceğiniz temel bir numara. Bir ajax eylemi veya Enter'da başka bir çalışma yapmak istiyorsanız, ancak aslında bir form göndermek istemiyorsanız bunu yapabilirsiniz:

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

Eylemi ayarlama = "javascript: void (0);" Bu, temelde varsayılan davranışı önlemek için bir kısayoldur. Bu durumda enter tuşuna basar veya tıklarsanız bir yöntem çağrılır ve bazı verileri yüklemek için bir ajax çağrısı yapılır.

Dene:

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

Enter tuşuna her basıldığında bir arama başlatmak için şunu kullanın:

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

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

Bu biraz yeni bir projeden aldığım bir şey ... Bunu internette buldum ve eski JavaScript'te daha iyi bir yol olup olmadığı hakkında hiçbir fikrim yok.

Kullanım keypressve event.key === "Enter"çağdaş JS ile!

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

Mozilla Belgeleri

Desteklenen Tarayıcılar

Her ne kadar, formda sadece bir alan ve bir gönderme düğmesi olduğu sürece, enter tuşuna basmak, sayfada başka bir form olsa bile formu göndermelidir.

Daha sonra formu js ile gönderme formunu yakalayabilir ve istediğiniz doğrulama veya geri çağrıları yapabilirsiniz.

Kimse bir süredir kullanılabilen html özenli "erişim anahtarını" fark etmedi.

Bu klavye kısayolları malzeme için bir javascript yolu değildir.

Accesskey MDN'deki kısayolları ilişkilendirir

Bunun gibi kullanılması amaçlanmıştır. Html özelliğinin kendisi yeterlidir, tarayıcı ve işletim sistemine bağlı olarak yer tutucuyu veya diğer göstergeleri nasıl değiştirebiliriz. Senaryo, bir fikir vermek için test edilmemiş bir çizik yaklaşımdır. Küçük bowser gibi bir tarayıcı kütüphane dedektörü kullanmak isteyebilirsiniz

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", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

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

Bu, tüm YUI sevenler için bir çözümdür :

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

Bu özel durumda, düğme işlevselliği ile enjekte edilen DOM nesnelerini tetiklemek için YUI kullanarak daha iyi sonuçlar elde ettim - ama bu başka bir hikaye ...

In Angular2 :

(keyup.enter)="doSomething()"

Düğmede görsel bir geri bildirim istemiyorsanız, düğmeye başvurmamak, doğrudan denetleyiciyi çağırmak iyi bir tasarımdır.

Ayrıca, kimliğe gerek yok - görünüm ve model arasında ayrım yapmanın başka bir NG2 yolu.

Bu durumda, Giriş düğmesini sunucuya girin ve Js komut dosyasını yürütmek istediğinizde enter düğmesini de devre dışı bırakın.

<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();" />

Bu değişim girişimi yakındır, ancak tarayıcıya göre ileri ve geri hareket eder (Safari 4.0.5 ve Firefox 3.6.3'te), bu yüzden sonuçta tavsiye etmem.

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

event.returnValue = false

Olayı işlerken veya olay işleyicinizin çağırdığı işlevde kullanın.

En azından Internet Explorer ve Opera'da çalışır.

Jquery mobile için yapmak zorundaydım

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

Ele tamamen düz bir JavaScript çözümü eklemek için form gönderiminde icedwater sorununun @ , burada tam bir çözüm ileform .

NOT: Bu, IE9 + dahil olmak üzere "modern tarayıcılar" içindir. IE8 sürümü çok daha karmaşık değildir ve buradan öğrenilebilir .

Keman: 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>

JavaScript

// 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 />";
            }
        });
    }
});

Modern, tanımlanmamış (olmadan keyCodeveya onkeydown) Javascript:

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

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

Benim iki sentim. Windows 8 için bir uygulama üzerinde çalışıyorum ve Enter düğmesine bastığımda düğmenin bir tıklama etkinliği kaydetmesini istiyorum. Bunu JS'de yapıyorum. Birkaç öneri denedim, ancak sorunları vardı. Bu gayet iyi çalışıyor.

JQuery ile yapmak için:

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

Normal JavaScript ile yapmak için:

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

Kısalık ve modern js yaklaşımını sevenler için.

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

Burada girdi , girdi öğenizi içeren bir değişkendir.

Modern JS keyCodekullanımdan kaldırıldığında, keybunun yerine

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

JQuery'de kullanabilirsiniz event.which==13. Eğer varsa form, kullanabilirsiniz $('#formid').submit()(söz konusu formun gönderilmesine doğru olay dinleyicileri eklenmiş olarak).

$('#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>

Sadece sınıf ekleyerek bu özelliği elde etmek için özel javascript geliştirdim

Misal: <button type="button" class="ctrl-p">Custom Print</button>

Buradan kontrol edin Fiddle
- veya -
çalışan örneği inceleyin https://stackoverflow.com/a/58010042/6631280

Not: geçerli mantıkta, Ctrl+ Enter

Bu, iyi çalışan küçük bir JavaScript işlevi de yardımcı olabilir:

<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)" />

Bu sorunun çözüldüğünü biliyorum, ama sadece başkaları için yararlı olabilecek bir şey buldum.