javascript - Oninput 显示 HTML 代码（有条件）

Question

我正在创建一个 HTML 表单，我想在其中显示与使用数字输入选择的文本一样多的输入字段。我会有这个：

<input type="number" name="syggrafei"  oninput="showfield(this.options[this.selectedIndex].value)" /><div id="div1"></div>

和Javascript：

<script>
function showfield(value) {
    if (value == '1') {
        document.getElementById('div1').innerHTML = '<input type="text" name="syggrafea1" placeholder="S????af?a? 1" />';
    }
    else if (value == '2') {
        document.getElementById('div1').innerHTML = '<input type="text" name="syggrafea1" placeholder="S????af?a? 1" /><br /><input type="text" name="syggrafea2" placeholder="S????af?a? 2"/>';
    } else {
        document.getElementById('div1').innerHTML = '';
    }
}

我对 Javacript 很陌生。有人可以帮我正确地写吗？

Answer 1

type=number没有选项，因此您的 oninput 将不起作用。你只想使用

showfield(this.value)

Answer 2

首先，我认为使用 "Onblur" 而不是 "oninput" 会更好，因为当用户完成更改时，它将执行该功能。

然后，您可以轻松地使用“For”来制作您想要的东西。像这样，看：

<input id="myInput" onblur="showfield($(this).value)" />

这是Javascript代码：

function showfield(value){
var data = '';
for ( i = 0 ; i < value ; i++ )
{
data += '<input type="text" name="syggrafea'+i+'" placeholder="Συγγραφέας '+i+'" />';
}
document.getElementById('div1').innerHTML=data;
}

:)