如何使用动态生成的文本字段使jquery占位符浮动
我有两个jquery脚本，我希望它们能够一起工作。第一个生成动态文本>字段，工作正常。第二个脚本生成浮动在文本字段上方的占位符。我正在尝试>以获得相同的效果和占位符格式（文本>字段上方浮动的较小蓝色文本），一旦您单击我动态生成的文本字段上的“添加成员”链接，如表单的>静态部分所示。我尝试用onclick函数绑定占位符脚本，但我>一定是做错了什么，因为；占位符浮动在动态生成的文本字段>上，但它将占位符/标签放置在文本字段下方而不是文本字段上方，并且不会>将格式应用于浮动文本。我非常感谢你在这方面的帮助如何使用动态生成的文本字段使jquery占位符浮动,jquery,dynamic,css-float,placeholder,Jquery,Dynamic,Css Float,Placeholder,我有两个jquery脚本，我希望它们能够一起工作。第一个生成动态文本>字段，工作正常。第二个脚本生成浮动在文本字段上方的占位符。我正在尝试>以获得相同的效果和占位符格式（文本>字段上方浮动的较小蓝色文本），一旦您单击我动态生成的文本字段上的“添加成员”链接，如表单的>静态部分所示。我尝试用onclick函数绑定占位符脚本，但我>一定是做错了什么，因为；占位符浮动在动态生成的文本字段>上，但它将占位符/标签放置在文本字段下方而不是文本字段上方，并且不会>将格式应用于浮动文本。我非常感谢你在这方面的
团队成员
jQuery（文档）.ready（函数（$）{
$（'.my form.add box'）。单击（函数（）{
var n=$（'.text box'）。长度+1；
if（5
<!DOCTYPE html>
<html>
<head>
<title>Team Members</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 5 < n ) {
alert('Sorry, you have reached the maximum of members for this team!');
return false;
}
var box_html = $('<fieldset class="text-box"><legend for="box' + n + '">Member <span class="box-number">' + n + '</span></legend> <input type="text" name="name[]" value="" id="name' + n + '" placeholder="Name"/> <input type="text" name="surname[]" value="" id="surname' + n + '" placeholder="Surname"/><a href="#" class="remove-box">Remove</a></fieldset>');
box_html.hide();
$('.my-form fieldset.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
//FLOATING LABEL SCRIPT///
$(document).ready(function(){
//$(".my-form .add-box").bind("click", function(){
$(".my-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), .my-form select, .my-form textarea").each(function(e) {
$(this).wrap('<article></article>');
var tag = $(this).attr("placeholder");
//var tag= $(this).data("tag");
$(this).attr("placeholder", "");
$(this).after('<label for="name">' + tag + '</label>');
});
//});
$('.my-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), .my-form select, .my-form textarea').on('blur', function() {
if (!$(this).val() == "") {
$(this).next().addClass('stay');
} else {
$(this).next().removeClass('stay');
}
});
});
</script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
* {
box-sizing: border-box;
outline:0;
font-family:century gothic;
font-size:1.0em;
}
body {
background: #eee;
}
form {
background: #fff;
padding: 2em;
width: 30em;
margin: 5em auto;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.my-form article {
border: none;
position: relative;
font-family: arial, sans-serif;
}
.my-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), .my-form select, .my-form textarea {
width: 100%;
padding: 1em 0.25em 0.15em 0.25em;
width: 100%;
font-size: 1.2em;
font-weight:bold;
color:black;
border: 0px solid #aaa;
border-bottom: 1px solid #aaa;
/*box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);*/
border-radius: 2px;
}
.my-form input:focus, .my-form select:focus, .my-form textarea:focus {
outline: none;
background: transparent;
border-bottom: 2px solid #0099ff;
}
.my-form input + label, .my-form select + label, .my-form textarea + label {
display: block;
cursor: text;
color: #777;
transition: .15s ease-out all;
position: absolute;
top: 1.2em;
left: 0.50em;
}
.my-form input:focus + label,
.my-form label.stay {
top: 0.35em;
left: 0.50em;
font-size: .7em;
font-weight: bold;
color: #139dd7;
transition: .15s ease-out all;
}
</style>
</head>
<body>
<div id="main">
<h1 style="font-size: 200%; color:#0099ff;">2020 Fall Bible School - Registration</h1>
<h2>Team Generator Form</h2>
<div class="my-form">
<form role="form" method="post">
<fieldset class="text-box">
<legend for="box1">Member <span class="box-number">1</span> (Team Coach)</legend>
<input type="text" name="name[]" value="" id="name1" placeholder="Name"/>
<input type="text" name="surname[]" value="" id="surname1" placeholder="Surname"/>
</fieldset>
<p><a class="add-box" href="#">Add Member</a> | <input type="submit" value="Submit" /></p>
</form>
</div>
</div>
</body>
</html>