Biri bana dönüş tuşuna basıldığında ve formda düğme yoksa nasıl HTML formu göndereceğimi söyleyebilir mi? Gönder düğmesi orada değil . Bunun yerine özel bir div kullanıyorum.
Yanıtlar:
IMO, bu en temiz cevap:
<form action="" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password"/><br/>
<div class="yourCustomDiv"/>
<input type="submit" style="display:none"/>
</form>Daha da iyisi, formu özel div kullanarak göndermek için javascript kullanıyorsanız, onu oluşturmak için javascript de kullanmalı ve düğmede display: none stilini ayarlamalısınız. Bu şekilde, javascript'i devre dışı bırakan kullanıcılar gönder düğmesini görmeye devam edecek ve üzerine tıklayabilecektir.
Ekranın: hiçbiri IE'nin girişi yok saymasına neden olmayacağı kaydedildi. Bir oluşturulan yeni JSFiddle örneğini standart form olarak başlar ve kullanımları ilerici geliştirme göndermek ve yeni div oluşturmak gizlemek söyledi. StriplingWarrior'dan CSS stilini kullandım .
Enter tuşuna basıldığında formu göndermek için bu satırlar boyunca bir javascript işlevi oluşturun.
function checkSubmit(e) {
if(e && e.keyCode == 13) {
document.forms[0].submit();
}
}
Ardından etkinliği ihtiyacınız olan kapsama ekleyin, örneğin div etiketine:
<div onKeyPress="return checkSubmit(event)"/>
Yine de bu aynı zamanda Internet Explorer 7'nin varsayılan davranışıdır (muhtemelen daha önceki sürümler de).
Çeşitli javascript / jQuery tabanlı stratejileri denedim, ancak sorun yaşamaya devam ettim. Ortaya çıkan en son sorun, kullanıcı tarayıcının yerleşik otomatik tamamlama listesinden seçim yapmak için enter tuşunu kullandığında yanlışlıkla gönderilmeyi içeriyordu. Sonunda şirketimin desteklediği tüm tarayıcılarda işe yarayan bu stratejiye geçtim:
<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>
.hidden-submit {
border: 0 none;
height: 0;
width: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
Bu, Chris Marasti-Georg tarafından şu anda kabul edilen cevaba benzer, ancak kaçınarak display: none, tüm tarayıcılarda düzgün çalışıyor gibi görünüyor.
Yukarıdaki kodu bir negatif içerecek şekilde düzenledim, tabindexböylece sekme anahtarını yakalamasın. Bu, teknik olarak HTML 4'te doğrulanmasa da, HTML5 spesifikasyonu, çoğu tarayıcının zaten uyguladığı şekilde çalışmasını sağlamak için dili içerir.
<button>Etiketi kullanın . W3C standardından:
BUTTON öğesi ile oluşturulan düğmeler, tıpkı INPUT öğesiyle oluşturulan düğmeler gibi işlev görür, ancak daha zengin oluşturma olanakları sunarlar: BUTTON öğesi içeriğe sahip olabilir. Örneğin, bir görüntüyü içeren bir BUTTON öğesi, türü "görüntü" olarak ayarlanmış bir GİRİŞ öğesi gibi işlev görür ve buna benzer, ancak BUTTON öğesi türü içeriğe izin verir.
Temel olarak <button>, javascript gerektirmeyen ve aynı zamanda bir form gönderebilen başka bir etiket vardır . Bir <div>etiket biçiminde ( <img />düğme etiketinin içi dahil) büyük ölçüde şekillendirilebilir . <input />Etiketteki düğmeler neredeyse esnek değildir.
<button type="submit">
<img src="my-icon.png" />
Clicking will submit the form
</button>
Ayarlanacak üç tür vardır <button>; onlar eşlediğiniz <input>düğme türleri.
<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>
Standartlar
<button>İle etiketleri kullanıyorumcss-sprite ve biraz cssrenkli ve işlevsel form düğmeleri elde etmek için stil. Öğeyle <a class="button">stil paylaşan bağlantılar için css yazmanın mümkün olduğunu unutmayın <button>.
İstediğinin bu olduğuna inanıyorum.
//<![CDATA[
//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
if (e.which == 13) { sendform(); }
}
//Form to send
function sendform() {
document.forms[0].submit();
}
//]]>
Bir tuşa her basıldığında, enter () işlevi çağrılacaktır. Basılan tuş, giriş tuşuyla (13) eşleşirse, sendform () çağrılır ve karşılaşılan ilk form gönderilir. Bu yalnızca Firefox ve diğer standartlarla uyumlu tarayıcılar içindir.
Bu kodu yararlı bulursanız, lütfen bana oy verdiğinizden emin olun!
JQuery ile bunu nasıl yapıyorum
j(".textBoxClass").keypress(function(e)
{
// if the key pressed is the enter key
if (e.which == 13)
{
// do work
}
});
Diğer javascript çok farklı olmaz. catch, enter tuşu olan "13" tuşa basma bağımsız değişkenini kontrol ediyor
e.which == 10.
Aşağıdaki komut dosyasını kullanın.
<SCRIPT TYPE="text/javascript">
<!--
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.form.submit();
return false;
}
else
return true;
}
//-->
</SCRIPT>
Kullanıcı enter tuşuna bastığında formu göndermesi gereken her alan için, aşağıdaki gibi gönderici işlevini çağırın.
<FORM ACTION="../cgi-bin/formaction.pl">
name: <INPUT NAME=realname SIZE=15><BR>
password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
Bu yöntemi kullanıyorum:
<form name='test' method=post action='sendme.php'>
<input type=text name='test1'>
<input type=button value='send' onClick='document.test.submit()'>
<input type=image src='spacer.gif'> <!-- <<<< this is the secret! -->
</form>
Temel olarak, görünmez bir görüntü türü girdisi ekliyorum (burada " spacer.gif " 1x1 şeffaf bir giftir).
Bu şekilde, bu formu 'gönder' butonu ile veya sadece klavyede enter tuşuna basarak gönderebilirim .
İşin püf noktası bu!
Neden div gönderme stillerini bir gönder düğmesine uygulamıyorsunuz? Eminim bunun için bir javascript vardır, ancak bu daha kolay olacaktır.
Asp.net kullanıyorsanız , formdaki defaultButton özniteliğini kullanabilirsiniz .
Aslında bir gönder düğmeniz veya bir resim göndermeniz gerektiğini düşünüyorum ... "div gönder" kullanmak için belirli bir nedeniniz var mı? Sadece özel stiller istiyorsanız tavsiye ederim <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm
Cevapları genişleterek, bu benim için işe yarayan şeydi, belki birisi onu faydalı bulabilir.
HTML
<form method="post" action="/url" id="editMeta">
<textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>
Js
function submitOnEnter(e) {
if (e.which == 13) {
document.getElementById("editMeta").submit()
}
}
Chris Marasti-Georg'un örneğine benzer şekilde, bunun yerine satır içi javascript kullanın. Esasen, enter tuşunun birlikte çalışmasını istediğiniz alanlara onkeypress ekleyin. Bu örnek şifre alanına etki eder.
<html>
<head><title>title</title></head>
<body>
<form action="" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
<input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>
Yana display: nonedüğmeleri ve girişleri Safari ve IE çalışma olmaz, ben gerektiren en kolay yolu bulmuştur hiçbir ekstra javascript kesmek , basitçe kesinlikle konumlandırılmış eklemektir <button />biçim ve yerde o kadar ekranın dışına kadar.
<form action="" method="get">
<input type="text" name="name" />
<input type="password" name="password" />
<div class="yourCustomDiv"/>
<button style="position:absolute;left:-10000px;right:9990px"/>
</form>
Bu, Eylül 2016 itibariyle tüm büyük tarayıcıların mevcut sürümünde çalışır.
Açıkçası, sadece <button/>istendiği gibi stil vermek için tavsiye edilir (ve anlamsal olarak daha doğru) .
"Otomatik odaklama" özniteliğinin kullanılması, varsayılan olarak düğmeye giriş odağı vermeye çalışır. Aslında, formdaki herhangi bir kontrole tıklamak, formun RETURN'e tepki vermesi için bir gereklilik olan forma odaklanma sağlar. Dolayısıyla, kullanıcının formdaki başka herhangi bir kontrole tıklamaması durumunda "otomatik odaklama" bunu sizin için yapar.
Dolayısıyla, kullanıcının RETURN tuşuna basmadan önce form kontrollerinden herhangi birine tıklamaması durumunda, "otomatik odaklama" çok önemli bir fark yaratır.
Ancak o zaman bile, bunun JS olmadan çalışması için karşılanması gereken 2 koşul vardır:
a) gitmek için bir sayfa belirlemelisiniz (boş bırakılırsa çalışmayacaktır). Örneğimde bu merhaba.php
b) kontrol görünür olmalıdır. Gizlemek için muhtemelen sayfanın dışına taşıyabilirsiniz, ancak display: none veya visibility: hidden seçeneğini kullanamazsınız. Yaptığım şey, satır içi stili kullanarak onu sayfadan 200 piksel sola taşımaktı. Yer kaplamaması için yüksekliği 0px yaptım. Çünkü aksi halde yukarıdaki ve altındaki diğer kontrolleri yine de bozabilir. Ya da öğeyi yüzdürebilirsiniz.
<form action="hello.php" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password"/><br/>
<div class="yourCustomDiv"/>
<input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>