Gimana cara nambahin behaviour "Enter" untuk pindah kolom isian?

Di aplikasi web based udah pasti cara untuk pindah kolom isian pake "Tab". Cara untuk pindah kolom isian pake "Enter" gwa bisa tapi terbatas pada page php biasa atau html.

Ada yang tau ga caranya ??

(dugaan sementara sih harus override CHtml::activeTextField() tapi gimana caranya??)

Btw ini kode javascriptnya untuk pindah kolom pake enter di php biasa :




function tabE(obj,e){ 

  var e=(typeof event!='undefined')?window.event:e;// IE : Moz 


  if(e.keyCode==13){ 

     var ele = document.forms[0].elements; 


  for(var i=0;i<ele.length;i++){ 

      var q=(i==ele.length-1)?0:i+1;// if last element : if any other 

  if(obj==ele[i]){ele[q].focus();break} 

} 

return false; 

} 

}



Lalu ditextfield ato button ditambah kode onkeypress="return tabE(this,event)", contoh :




<input type="text" onkeypress="return tabE(this,event)">



Trims untuk perhatiannya.

masih newbie, belum tau caranya, hehehe :D

urutan langkahnya:

[list=1]

[*]letakkan script js.

untuk menyisipkan script external bisa lihat di sini

[*]tambahkan atribut / htmloptions pada komponen, misal pada textbox berikut:


<?php echo CHtml::activeTextField($model,'name',array("onkeypress"=>"return tabE(this,event)")); ?>

[/list]

sedikit modifikasi pada halaman view/contact.php


<script type="text/javascript">

function tabE(obj,e){ 

  var e=(typeof event!='undefined')?window.event:e;// IE : Moz 


  if(e.keyCode==13){ 

     var ele = document.forms[0].elements; 


  for(var i=0;i<ele.length;i++){ 

      var q=(i==ele.length-1)?0:i+1;// if last element : if any other 

  if(obj==ele[i]){ele[q].focus();break} 

} 

return false; 

} 

}

</script>


<?php

$this->pageTitle=Yii::app()->name . ' - Contact Us';

$this->breadcrumbs=array(

	'Contact',

);

?>


<h1>Contact Us</h1>


<?php if(Yii::app()->user->hasFlash('contact')): ?>


<div class="success">

	<?php echo Yii::app()->user->getFlash('contact'); ?>

</div>


<?php else: ?>


<p>

If you have business inquiries or other questions, please fill out the following form to contact us. Thank you.

</p>


<div class="form">


<?php echo CHtml::beginForm(); ?>


	<p class="note">Fields with <span class="required">*</span> are required.</p>


	<?php echo CHtml::errorSummary($model); ?>


	<div class="row">

		<?php echo CHtml::activeLabelEx($model,'name'); ?>

		<?php echo CHtml::activeTextField($model,'name',array("onkeypress"=>"return tabE(this,event)")); ?>

	</div>


	<div class="row">

		<?php echo CHtml::activeLabelEx($model,'email'); ?>

		<?php echo CHtml::activeTextField($model,'email',array("onkeypress"=>"return tabE(this,event)")); ?>

	</div>


	<div class="row">

		<?php echo CHtml::activeLabelEx($model,'subject'); ?>

		<?php echo CHtml::activeTextField($model,'subject',array('size'=>60,'maxlength'=>128,"onkeypress"=>"return tabE(this,event)")); ?>

	</div>


	<div class="row">

		<?php echo CHtml::activeLabelEx($model,'body'); ?>

		<?php echo CHtml::activeTextArea($model,'body',array('rows'=>6, 'cols'=>50)); ?>

	</div>


	<?php if(extension_loaded('gd')): ?>

	<div class="row">

		<?php echo CHtml::activeLabelEx($model,'verifyCode'); ?>

		<div>

		<?php $this->widget('CCaptcha'); ?>

		<?php echo CHtml::activeTextField($model,'verifyCode',array("onkeypress"=>"return tabE(this,event)")); ?>

		</div>

		<div class="hint">Please enter the letters as they are shown in the image above.

		<br/>Letters are not case-sensitive.</div>

	</div>

	<?php endif; ?>


	<div class="row submit">

		<?php echo CHtml::submitButton('Submit'); ?>

	</div>


<?php echo CHtml::endForm(); ?>


</div><!-- form -->


<?php endif; ?>

meski kasusnya beda, cukup mendapat pencerahan nih.:rolleyes:

menarik topicnya … good idea untuk dipakai di beberapa form aplikasi.

Kok pindah pake Enter? bukannya ini sama dengan submit, kenapa fungsi ini harus di overwrite menjadi pindah kolom?

pun kalo pindah kolom, IMHO seharusnya solusiny bukan per field/ item dari form,

kalo tidak salah ada jQuery untuk menjadikan form menjadi ajax, artinya semua jenis form kalo kena fungsi ini akan jadi ajax secara keseluruhan.

nah dengan ide yang sama kenapa tidak dibuat class jQuery yang jika di kenakan di form, maka otomatis semua fieldnya mendetek enter sebagai pindah kolom, bukan nya ini solusi lebih universal.

tapi kalo ane tetep pada pendapat sebaiknya jangan di ganti fungsi enter sebagai submit menjadi tab (CMIIW)