2017-06-21 19 views
0

私はwebdev、html全体がまだまだ新しいです。私は3つのフィールドを持つ基本的な電話番号フォームを持っており、フィールドに番号をコピーできるようにしようとしています。前のフィールドが満たされているかどうかをチェックし、次のボックスに数字の次の部分を入力する何か?
ご協力いただきありがとうございます。
あなたは、いくつかの数字が入力された後に自動入力したい、それを見てみるとコピーペーストの電話番号フィールドを自動入力する

<html> 
<head> 

<title>Phone Input Test</title> 
<script type= javascript> 
var isNN = (navigator.appName.indexOf("Netscape")!=-1); 
function autoTab(input,len, e) { 
    var keyCode = (isNN) ? e.which : e.keyCode; 
    var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46]; 
    if(input.value.length >= len && !containsElement(filter,keyCode)) { 
    input.value = input.value.slice(0, len); 
    input.form[(getIndex(input)+1) % input.form.length].focus(); 
    } 

function containsElement(arr, ele) { 
    var found = false, index = 0; 
    while(!found && index < arr.length) 
    if(arr[index] == ele) 
     found = true; 
    else 
     enter code here 
    index++; 
    return found; 
} 

function getIndex(input) { 
    var index = -1, i = 0, found = false; 
    while (i < input.form.length && index == -1) 
    if (input.form[i] == input) 
     index = i; 
    else 
     i++; 
    return index; 
} 
return true; 
} 
</script> 

</head> 
<body bgcolor=#ffffff> 
<form action="phonetest.html" method="post"> 
<input type="text" name="dest_ac" size=3 onKeyUp="return autoTab(this, 3, event);" maxlength=3> 
<input type="text" name="dest_niu" size=3 onKeyUp="return autoTab(this, 3, event);" maxlength=3> 
<input type="text" name="dest_st" size=4 maxlength=4> 
</form> 
</body> 
</html> 
+0

私が正しく理解していれば、あなたはそれが2-3桁の数字を入力した後に自動入力したいですか?もしそうでなければ、データベースや角度のようないくつかのタイプのWebフレームワークがなければ可能かどうかわかりません。 Webフレームワークを使用していても、データベースなしの方法はないと思います。 –

+0

@ジャスミタルタン閉じる。私は、最初のフィールドに電話番号をコピーし、数字の部分をとり、適切なフィールドに入力することを意味しました。 303 456 4854のように、最初のボックスの303、2番目のボックスの456など。 –

+0

なぜそれをしたいのか分かりませんが、とにかく、3を2回スライスすると、4つの数字が残されます。数値を変数に保存してから入力をクリアし、変数にある値を入力に割り当てます。 jQueryを使用している場合、 '' '$(" dest_ac ")。value(variable_first_three)' '' –

答えて

1

$(function() { 
 

 
      var $inputs = $(".def-txt-input"); 
 
      var intRegex = /^\d+$/; 
 

 
      $inputs.on("input.fromManual", function() { 
 
       if (!intRegex.test($(this).val())) { 
 
        $(this).val(""); 
 
       } 
 
      }); 
 

 

 
      $inputs.on("paste", function() { 
 
       $inputs.attr("maxlength", 15); 
 
       var $this = $(this); 
 
       var originalValue = $this.val(); 
 
       
 
    
 
       $this.val(""); 
 
    
 
       $this.one("input.fromPaste", function() { 
 

 
        var values = $(this).val().match(/.{1,1}/g); 
 
        $("#txtBox1").val(""); 
 
        $inputs.attr("maxlength", 5); 
 
        for (i = 0; i < values.length; i++) { 
 
         if ($("#txtBox1").val().length < 5) { 
 
          this.value = this.value.toString() + values[i]; 
 
         } 
 
         else if ($("#txtBox2").val().length < 5) { 
 
          $("#txtBox2").val($("#txtBox2").val().toString() + values[i]); 
 
         } 
 
         else if ($("#txtBox3").val().length < 5){ 
 
          $("#txtBox3").val($("#txtBox3").val().toString() + values[i]); 
 
         } 
 
        } 
 

 
       }); 
 

 
       
 
      }); 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
     <input id="txtBox1" type="text" class="def-txt-input" maxlength="5"> 
 
     <input id="txtBox2" type="text" class="def-txt-input" maxlength="5"> 
 
     <input id="txtBox3" type="text" class="def-txt-input" maxlength="5">

+1

ありがとう!これは私の問題を一見解決しました。私はjqueryについてほとんど知っていないので、私はあなたの助けに感謝します –

-1

(ここではHTMLです)。これが厄介なPHPなしで可能かどうかは不明です。 SQL。データベースを必要とすることがありましたが、今私はそれを考えるようになりました、これはDPAの違反かもしれません。あなたがしなければならないことは、タイプ3の数字であると思ってください。そこには、人々の個人情報があなたのために自動的に記入されています!

関連する問題