2013-10-26 24 views
9

giriş giriş formunu, her satırın sonunda ürün kodu ve miktar sütunlarını birden çok satırda içerir ve (-) düğmesini silin. Ayrıca, ilk sütunda ve formdan sonra düğme içerir.Formdaki bir sonraki giriş alanını etkinleştirmek için,

Enter tuşuna basılması, odağı sonraki metin veya sayısal giriş alanına (ürün kodu veya miktarı), atlama düğmelerine ayarlamalıdır.

Aşağıdaki kodu kullandığımı denedim ama girme tuşu yoksayılıyor.

Chrome hata ayıklayıcısı, $(this).next('input').focus() satırının yürütüldüğünü, ancak focus() çağrısının herhangi bir etkisi olmadığını gösterir. jquery-mobil

jquery, ASP.NET MVC4

<!DOCTYPE html> 
<html> 
<head> 
    <script src="/Scripts/jquery/jquery-1.9.1.js"></script> 
</head> 
<body> 
    <div data-role="page" data-theme="a"> 
<div data-role="content"> 
<script> 
    $(function() { 
    $('#inputform').on('keydown', 'input', function (event) { 
     if (event.which == 13) { 
     $(this).next('input').focus(); 
     event.preventDefault(); 
     } 
    }); 
    }); 
</script> 
<form id='inputform' method="post" 
    action ="/Detail/SaveFullDocument?_entity=DokG&amp;_id=0"> 
    <fieldset> 
<div class='form-field' > 
<label class='form-label' for='Tasudok'>Order number</label> 
<input class='ui-widget-content ui-corner-all form-fullwidth' id='Tasudok' name='Tasudok' value='' maxlength='25' /></div> 

    <input type="hidden" name="_rows" /> 

    <table id="tableId"> 
    <tr> 
     <th>Product code</th> 
     <th>Quantity</th> 
     <td> 
     <input type="button" value="+" onclick="addRow('tableId')" /></td> 
    </tr> 

    <tr> 
     <td> 
     <input type="text" name="Toode" /></td> 
     <td> 
     <input type="number" name="Kogus" /></td> 
     <td> 
     <input type="button" value="-" onclick="deleteRow(this)" /></td> 
    </tr> 
    </table> 

    <input type="button" value="+" onclick="addRow('tableId')" /> 
    <input type="submit" value='Save order' /> 
</form> 

    </div> 
    </div> 
</body> 
</html> 

cevap

4

kullanılmaktadır sorun sonraki giriş bazen bir düğme olmasıdır. İşte JS Fiddle olası bir çözüm ile geçerli:

http://jsfiddle.net/hxZSU/1/

Ben kullanıcı için girdi teşkil html elemanları için bir veri niteliği ekledik. Öznitelik ayrıca, odak alan elemanların sırasını kontrol edebilmeniz için bir artan endeks içerir.

İşte HTML değişiklikler şunlardır:

İşte
<input class='ui-widget-content ui-corner-all form-fullwidth' data-index="1" id='Tasudok' name='Tasudok' value='' maxlength='25' /> 
<input type="text" name="Toode" class="my-input" data-index="2" /> 
<input type="number" name="Kogus" data-index="3" /> 

giriş alanları arasında hareket edecek yeni bir JavaScript olaydır. Öğenin dizininin şu anda $ (event.target) .attr ('data-index') kullanılarak düzenlendiğini belirleyecektir. İndeksi artırır ve bunu kullanarak bir sonraki elemanı seçer.

$('#inputform').on('keydown', 'input', function (event) { 
    if (event.which == 13) { 
     event.preventDefault(); 
     var $this = $(event.target); 
     var index = parseFloat($this.attr('data-index')); 
     $('[data-index="' + (index + 1).toString() + '"]').focus(); 
    } 
}); 
+0

iOS'ta çalışmıyor ... – tylerl

İlgili konular