如何使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 (将#修改为@）

css-float dynamic placeholder

如何使jQuery占位符与动态生成的文本字段一起浮动

问题描述

解决方法

相关问答