Oninput显示HTML代码(有条件)

时间:2013-06-24 16:26:13

标签: javascript html5 input numbers

我正在创建一个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很新。有人可以帮我写好吗?

2 个答案:

答案 0 :(得分:0)

type=number没有选项,因此您的oninput将无效。你只想用

showfield(this.value)

答案 1 :(得分:0)

首先我认为如果使用“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;
}

:)