انتقال مکان نما به فیلد بعد توسط کلید Enter

AmRo · 2019/03/12, 11:46

این الان درست کار میکنه:

کد:

<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<script>


$(document).ready(function() {


$('.contact-form .contact-input').keydown(function (e) {


if (e.which === 13) { 


var inputs = $(this).closest('.contact-form').find(':input:visible');
var nextInput = inputs.eq(inputs.index(this) + 1);
var nextInputType = nextInput.attr('type');


    nextInput.focus();


if (nextInputType != 'submit')
e.preventDefault();
}
});
});




</script>
</head>
  <body>  
  
    <form action="ContactProcessor.php" class="contact-form">


<input placeholder="Full name" class="contact-input" name="T1" size="20"/>


<br />


<input type="text" class="contact-input" name="T4" size="20"/>


<br />


<input placeholder="Full name" class="contact-input" name="T5" size="20" style="display:none;"/>


<input placeholder="Phone number" class="contact-input" name="T2" size="20"/>


<br />


<input type="text" class="contact-input" name="T3" size="20"/>


<br />


<input type="text" class="contact-input" name="T4" size="20"/>


<br />


<input placeholder="Full name" class="contact-input" name="T5" size="20" style="display:none;"/>


<br />


<input placeholder="Full name" class="contact-input" name="T7" size="20" style="display:none;"/>


<br />


<input type="submit" class="contact-input"/>
</form>
  </body>
</html>

rash44 · 2019/03/12, 11:58

نوشته اصلی توسط AmRo

این الان درست کار میکنه:

کد:

سلام

چون از جداول داره استفاده میشه و ناچارا نباید به طراحی فرم دست بخوره ، لطفا یک راهکار برام تعیین کنید

ممنون از شما

AmRo · 2019/03/12, 12:16

این با جدولم کار میکنه:

کد:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.contact-form .contact-input').keydown(function (e) {
  if (e.which === 13) {
   var inputs = $(this).closest('.contact-form').find(':input:visible');
   var nextInput = inputs.eq(inputs.index(this) + 1);
   var nextInputType = nextInput.attr('type');
  
      nextInput.focus();
  
   if (nextInputType != 'submit')
    e.preventDefault();
  }
});
});

</script>
</head>
  <body> 
 
    <form action="ContactProcessor.php" class="contact-form">
   <table border="0" width="100%">
  <tr>
   <td>
      <input placeholder="Full name" class="contact-input" name="T1" size="20"/></td>
  </tr>
  <tr>
   <td>
      <input placeholder="Phone number" class="contact-input" name="T2" size="20"/></td>
  </tr>
  <tr>
   <td>
      <input type="text" class="contact-input" name="T3" size="20"/></td>
  </tr>
  <tr>
   <td>
      <input type="text" class="contact-input" name="T4" size="20"/></td>
  </tr>
  <tr style="display:none;">
   <td>
      <div align="left">
      <table border="0" width="50%">
  <tr>
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T5" size="20" style="display:none;"/>
            </td>                    
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T6" size="20" style="display:none;"/>
            </td>                    
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T7" size="20" style="display:none;"/>
            </td>                    
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T8" size="20" style="display:none;"/>
            </td>
  </tr>
  </table>
   </div>
   </td>
  </tr>
  <tr>
   <td>
      <input type="submit" class="contact-input"/></td>
  </tr>
</table>
</form>
  </body>
</html>

rash44 · 2019/03/12, 12:32

ممنون از راهنمائی شما

کارآیی کلاس contact-input در فیلدها (غیر از استایل) چیه ؟

AmRo · 2019/03/12, 13:02

برای دسترسی به عنصر از طریق جی کوئری این کلاس رو دادم شما می تونید حذفش کنید و به جای نام عنصر از اسم Tag استفاده کنید

rash44 · 2019/03/12, 14:30

با عرض سلام مجدد

به فرم مربوطه چند تا فیلد از نوع های مختلف اضافه کردم و مجددا انتقال انجام نشد

ممنون میشم اگر این مورد هم بررسی کنید

AmRo · 2019/03/12, 20:37

اینو تست کنید:

کد:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.contact-form .contact-input').keydown(function (e) {
e.preventDefault();


  if (e.which === 13) {
var inputs = $(this).closest('.contact-form').find(':input:visible');
var nextInput = inputs.eq(inputs.index(this) + 1);
var nextInputType = nextInput.attr('type');
  
      nextInput.focus();
  
if (nextInputType == 'submit')
nextInput.click();
  }
});
});


</script>
</head>
  <body> 


    <form action="ContactProcessor.php" class="contact-form">
   <table border="۰" width="100%">
  <tr>
   <td>
      <input placeholder="Full name" class="contact-input" name="T۱" size="20"/></td>
  </tr>
  <tr>
   <td>
      <input placeholder="Phone number" class="contact-input" name="T۲" size="20"/></td>
  </tr>
  <tr>
   <td>
      <input type="text" class="contact-input" name="T۳" size="20" class="contact-input"/></td>
  </tr>
  <tr>
   <td>
      <input type="checkbox" name="C1" value="ON" class="contact-input"></td>
  </tr>
  <tr>
   <td>
      <input type="text" class="contact-input" name="T۴" size="20" class="contact-input"/></td>
  </tr>
  <tr>
   <td>
      <select size="1" name="D1" class="contact-input">
<option value="ttt" class="contact-input">Test</option>
</select></td>
  </tr>
  <tr>
   <td>
      <input type="text" class="contact-input" name="T۴0" size="20" class="contact-input"/></td>
  </tr>
  <tr>
   <td>
      <input type="radio" value="V1" name="R1" class="contact-input"></td>
  </tr>
  <tr>
   <td>
      &nbsp;</td>
  </tr>
  <tr style="display:none;">
   <td>
      <div align="left">
      <table border="0" width="100%">
  <tr>
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T۵" size="20">
            </td>                    
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T۶" size="20">
            </td>                    
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T۷" size="20">
            </td>                    
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T۸" size="20">
            </td>
  </tr>
  </table>
   </div>
   </td>
  </tr>
  <tr>
   <td>
      &nbsp;</td>
  </tr>
  <tr>
   <td>
      <div align="left">
      <table border="0" width="100%">
  <tr>
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T۵0" size="20">
            </td>                    
   <td align="center">
                     <input type="hidden" placeholder="Full name" class="contact-input" name="T۶0" size="20">
            </td>                    
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T۷0" size="20">
            </td>                    
   <td align="center">
                     <input placeholder="Full name" class="contact-input" name="T۸0" size="20">
            </td>
  </tr>
  </table>
   </div>
   </td>
  </tr>
  <tr>
   <td>
      <input type="submit" class="contact-input"/></td>
  </tr>
</table>
</form>
  </body>
</html>

rash44 · 2019/03/13, 07:06

با عرض سلام و تشکر از شما

با توجه به تغییرات ایجاد شده ، اگر فایل پیوست را ملاحظه نمائید در هیچ کدام از فیلدها نمی توان کاراکتری را تایپ کرد

AmRo · 2019/03/13, 07:55

الان کار میکنه

کد:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-۸">
    <script src="jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $('.contact-form .contact-input').keydown(function (e) {
   
      if (e.which === 13) {
  e.preventDefault();
    var inputs = $(this).closest('.contact-form').find(':input:visible');
    var nextInput = inputs.eq(inputs.index(this) + 1);
    var nextInputType = nextInput.attr('type');
      
          nextInput.focus();
      
    if (nextInputType == 'submit')
    nextInput.click();
      }
    });
    });




    </script>
    </head>
      <body> 




        <form action="ContactProcessor.php" class="contact-form">
       <table border="1" width="100%">
      <tr>
       <td>
          <input class="contact-input" name="T1" size="30"/></td>
      </tr>
      <tr>
       <td>
          <input placeholder="Phone number" class="contact-input" name="T2" size="30"/></td>
      </tr>
      <tr>
       <td>
          <input type="text" class="contact-input" name="T3" size="30" class="contact-input"/></td>
      </tr>
      <tr>
       <td>
          <input type="checkbox" name="T4" value="ON" class="contact-input"></td>
      </tr>
      <tr>
       <td>
          <input type="text" class="contact-input" name="T5" size="30" class="contact-input"/></td>
      </tr>
      <tr>
       <td>
          <select size="1" name="T6" class="contact-input">
    <option value="ttt" class="contact-input">Test</option>
    <option>5464554</option>
    </select></td>
      </tr>
      <tr>
       <td>
          <input placeholder="Full name" class="contact-input" name="T7" size="30"/></td>
      </tr>
      <tr>
       <td>
          <input type="radio" value="V1" name="T8" class="contact-input"></td>
      </tr>
      <tr>
       <td>
          &nbsp;</td>
      </tr>
      <tr style="display:none;">
       <td>
          <div align="left">
          <table border="1" width="100%">
      <tr>
       <td align="center">
                         <input placeholder="Full name" class="contact-input" name="T9" size="30">
                </td>                    
       <td align="center">
                         <input placeholder="Full name" class="contact-input" name="T10" size="30">
                </td>                    
       <td align="center">
                         <input placeholder="Full name" class="contact-input" name="T11" size="30">
                </td>                    
       <td align="center">
                         <input placeholder="Full name" class="contact-input" name="T12" size="30">
                </td>
      </tr>
      </table>
       </div>
       </td>
      </tr>
      <tr>
       <td>
          &nbsp;</td>
      </tr>
      <tr>
       <td>
          <div align="left">
          <table border="1" width="100%">
      <tr>
       <td align="center">
                         <input placeholder="Full name" class="contact-input" name="T13" size="30">
                </td>                    
       <td align="center">
                         <input type="hidden" placeholder="Full name" class="contact-input" name="T7" size="30">
                </td>                    
       <td align="center">
                         <input placeholder="Full name" class="contact-input" name="T14" size="30">
                </td>                    
       <td align="center">
                         <input placeholder="Full name" class="contact-input" name="T15" size="30">
                </td>
      </tr>
      </table>
       </div>
       </td>
      </tr>
      <tr>
       <td>
          <input type="submit" class="contact-input"/></td>
      </tr>
    </table>
    </form>
      </body>
    </html>

rash44 · 2019/03/13, 08:36

با تشکر از جنابعالی لطفا فایل پیوست را ملاحظه نمائید برای این فیلد یک کلاس دیگه طراحی شده است و الزاما باید همین کلاس باشد . با توجه به اسکریپت های ارسالی جنابعالی و تخصیص یک کلاس دیگه به فیلدها ، جهت حل این مورد باید به چه صورت اقدام شود ؟ ممنون

انجمن تخصصی برنامه نویسی

آموزش برنامه نویسی و سورس کدهای آماده

تـــوجـــه

موضوع: انتقال مکان نما به فیلد بعد توسط کلید Enter

ابزارهای موضوع

نحوه نمایش موضوع

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

درباره سایت