[英]When all previous fields are filled, add new input field
Here is my current HTML and CSS code: 这是我当前的HTML和CSS代码:
<form method="post" id="achievementf1" action="">
<span>1.</span>
<input type="text" name="achievement1" id="achievement1" />
<br />
<span>2.</span>
<input type="text" name="achievement2" id="achievement2" />
<br />
<span>3.</span>
<input type="text" name="achievement3" id="achievement3" />
<br />
<input type="submit" name="submit1" value="Registrate" />
</form>
#border #info-box #info #box input[type="text"] {
float: left;
margin-top: 10px;
margin-bottom: 10px;
height: 25px;
width: 650px;
outline: none;
}
#border #info-box #info #box input[type="submit"] {
margin-left: 500px;
margin-top: 10px;
margin-bottom: 10px;
height: 35px;
color: #fff;
font-size: 20px;
border: 2px solid #fff;
border-radius: 8px 8px 8px 8px;
padding-left: 15px;
padding-right: 15px;
padding-top: 3px;
cursor: pointer;
}
You can see it in action at http://jsfiddle.net/mzNtj/2/ . 您可以在http://jsfiddle.net/mzNtj/2/上看到它的运行情况。 I'd like to know how I can automatically append a new input field when all the others have been filled.
我想知道当所有其他字段都填满后我如何自动附加新的输入字段。 I have a basic idea, to read in each field's value and check it with an
if
statement. 我有一个基本的想法,读取每个字段的值并使用
if
语句检查它。 Then, if none are empty, add new one. 然后,如果没有为空,则添加新的。
Is this an appropriate way to check, or does anyone have any better ideas? 这是一种适当的检查方式,还是有人有更好的想法?
Try the following code: 请尝试以下代码:
$(function(){
$(document).on("change","input", function(){
var allGood=true;
var lastInputField=0;
$("input").each(function() {
if ($(this).val() =="") {
allGood=false;
return false;
}
lastInputField++;
});
if (allGood) {
$("<span>" + lastInputField + "<input type='text' id='lastinputfieldId" + lastInputField +"'" +
"name='lastinputfieldName" + lastInputField + "'></span>").appendTo("form");
}
});
});
Demo: http://jsfiddle.net/mzNtj/3/ . 演示: http : //jsfiddle.net/mzNtj/3/ 。
首先隐藏所有字段填充时要添加的内容...然后当最后一个字段使用键侦听器调用一个函数时,在该函数中使该字段可见
try this one : 试试这个:
http://jsfiddle.net/F8qR2/ http://jsfiddle.net/F8qR2/
the code is : 代码是:
function AllInputsFilled() {
return $("input[type='text']", $("#achievementf1")).filter(function() {
return $(this).val().trim() === "";
}).size() === 0;
}
function AdditionEvent() {
if (AllInputsFilled()) {
AddInput();
}
}
function AddInput() {
var cnt = $("input[type='text']", $("#achievementf1")).size() + 1;
$("<br><span>" + cnt + "</span><input type='text' name='achievement" + cnt+ "' id='achievement" + cnt+ "' />").insertAfter("#achievementf1 input[type='text']:last");
$("input", $("#achievementf1")).unbind("keyup").bind("keyup", function(){ AdditionEvent() });
}
$("input", $("#achievementf1")).bind("keyup", function(){ AdditionEvent() });
Alright, take a look at this jsfiddle: http://jsfiddle.net/Ralt/mzNtj/4/ 好吧,看看这个jsfiddle: http : //jsfiddle.net/Ralt/mzNtj/4/
Read attentively the comments to understand what this code does: 仔细阅读评论以了解此代码的作用:
// First, listen for the "onkeypress" event instead of the "blur" or "change".
// Why? For the UX, since the user will think he can click the submit
// button as soon as the third field is filled in if you use the "blur" or
// "change" event.
document.forms[ 'achievementf1' ].onkeypress = function( e ) {
// Some cross-browser handling
var e = e || window.event,
target = e.target || e.srcElement;
// If the target is an INPUT
if ( target.nodeName === 'INPUT' ) {
// Now here is the tricky part:
// The "every" method returns false if *one* callback returns false,
// otherwise it returns true.
// And we use !! to check if it's not empty.
var allNotEmpty = [].every.call( this.elements, function( el ) {
return !!el.value;
} )
// If it's true, it means all the fields are not empty
if ( allNotEmpty ) {
// So let's create an input
var newInput = document.createElement( 'input' )
// Set some properties
// And then... insert it before the submit button :-)
this.insertBefore( newInput, this.elements[ 'submit1' ] );
}
}
}
I know, my code is weird since I care about cross-browser to handle events, but every
is not supported by legacy browsers. 我知道,我的代码很奇怪,因为我关心跨浏览器来处理事件,但传统浏览器并不支持
every
。 Oh well... 那好吧...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.