如何解决如何使jQuery占位符与动态生成的文本字段一起浮动
我有2个jquery脚本，希望它们可以一起使用。第一个生成动态文本>字段，并且工作正常。第二个脚本生成占位符，这些占位符浮在文本字段上方。我试图>获得相同的效果和占位符格式（较小的蓝色文本浮在文本>字段上方），然后单击动态生成的文本字段上的“添加成员”链接，如>静态部分所示的形式。我试图用on onclick函数绑定占位符脚本，但是我必须做错什么，因为；占位符浮动在动态生成的文本字段上，但是将占位符/标签放置在文本字段下方而不是文本字段上方，并且不将格式应用于浮动文本。非常感谢您的帮助。
<!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 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,.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 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,.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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。