2

javascriptで複数の入力テキストを作成するのに問題があります。

私のポイントは、前の入力が完了するたびに新しい入力テキストを作成することです。（親？）

コンボボックスのコードがいくつかありますが、今回はテキストボックスを入力するだけです。

どうやってやるの ？

私はこのコードを見つけました：

<script type="text/javascript">
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"text\" />";
}
</script>

<input type="button" onmousedown="addInput();" />
<div id="inputs"></div>

しかし、私の問題では、ボタンは廃止されました。

私のイベントトリガーは、「ユーザーが入力テキストボックスをクリックし、！=空白の場合、新しいテキストボックスを作成する」ということになると思います。

すべての入力テキストボックスを識別するために、いくつかのIDが必要です。

乾杯。

4

3 に答える 3

2

HTMLコード：

<div id="inputcontainer">
    <input type="text" name="input0" id="input0" onkeyup="addInput();" />
</div>

そしてJavascript：

var currentindex = 0;
function addInput(){
    var lastinput = document.getElementById('input'+currentindex);
   if(lastinput.value != ''){
        var container = document.getElementById('inputcontainer');
        var newinput = document.createElement('input');
        currentindex++;
        newinput.type = "text";
        newinput.name = 'input'+currentindex;
        newinput.id = 'input'+currentindex;
        newinput.onkeyup = addInput;
        container.appendChild(newinput);
   }
}

これにより、最後の入力が空でない場合にのみ、リストに新しい入力が追加されます。

http://jsfiddle.net/HJbgS/

于 2012-12-17T11:36:44.557 に答える
2

JSBInデモ

これが役立つと思います：

   <div id="myDiv">
        <input type="text" id="txt_1" onkeydown="newTextBox(this)" />
   </div>

<script type="text/javascript">

function newTextBox(element){
   if(!element.value){
       element.parentNode.removeChild( element.nextElementSibling);
       return;
   }
   else if(element.nextElementSibling)
       return;
    var newTxt = element.cloneNode();
    newTxt.id = 'txt_'+( parseInt( element.id.substring(element.id.indexOf('_')+1)) + 1);
    newTxt.value='';
    element.parentNode.appendChild(newTxt);
}  

</script>
于 2012-12-17T12:33:22.590 に答える
0

onchangeテキスト入力フィールドでイベントを確認してください。onmousedownボタンと同じように使用できます。

例については、 http：//www.w3schools.com/jsref/event_onchange.aspを参照してください。

次に、addInput()関数で、前のテキストフィールドの入力が！=""であるかどうかを確認する必要があります。

于 2012-12-17T11:28:28.557 に答える