Web Formlarında “Enter” Tuşunu Pasifleştirmek

20 Temmuz 2006, 01:41 tarihinde yazılmış olup, 1,516 kez okunmuş ve henüz yorum almamış

Etiketler:

Web formlarında bilirsinizki “Enter” tuşuna bastığınız anda form onaylanmış olur. Hımm bazı formlarda onay tuşunun tipi submit olmayabilir ve o yüzden “Enter” tuşuna bassanızda değişen birşey olmayabilir. Fakat amacımız diğerini güzelleştirmek :) Bu yazıda formlarımızda “Enter” tuşunu pasifleştireceğiz ve “Enter” tuşuna basıldıkça diğer form öğesine atlanacak.

1.86
Yazı ebatı büyüt Yazı ebatı küçült Arkadaşına yolla Bu yazıyı paylaş Yorum yap Yazının geri izleme adresi Yazıyı XML ile takip et


Bunu JavaScript ile gerçekleştireceğiz. Kodlar ve anlatım Dynamic Drive sitesinden.

Nasıl Yapacağız?

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2.  
  3. /***********************************************
  4. * Disable "Enter" key in Form script- By Nurul Fadilah(nurul@REMOVETHISvolmedia.com)
  5. * This notice must stay intact for use
  6. * Visit http://www.dynamicdrive.com/ for full source code
  7. ***********************************************/
  8.                
  9. function handleEnter (field, event) {
  10.         var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
  11.         if (keyCode == 13) {
  12.             var i;
  13.             for (i = 0; i <field.form.elements.length; i++)
  14.                 if (field == field.form.elements[i])
  15.                     break;
  16.             i = (i + 1) % field.form.elements.length;
  17.             field.form.elements[i].focus();
  18.             return false;
  19.         }
  20.         else
  21.         return true;
  22.     }     
  23.  
  24. </script>

kodlarını etiketlerinizin arasına ekleyeceksiniz.

Formunuz üzerinde "ENTER" tuşunun pasif kalmasını istediğiniz öğelerde ise bunu alttaki örnekte yer aldığı gibi belirteceksiniz.

PLAIN TEXT
JavaScript:
  1. <form>
  2. <input type="text" onkeypress="return handleEnter(this, event)"><br>
  3. <input type="text" onkeypress="return handleEnter(this, event)"><br>
  4. <textarea>Deneme</textarea>
  5. </form>

Bu kadar..

Bunu okuyanlar, alttakileri de okudu

  • -

Bu yazılar da ilginizi çekebilir ;)

Wordpress.Org Lisans Kullanım Şartları Dmry.net Hakkında

Kullanım şartları yerine getirilmeden hiçbir şekilde kopyala-yapıştır yapılamaz.
Dmry.net Vital Teknoloji tarafından desteklenmektedir.
eXTReMe Tracker