动态复制表单文本区域

Dynamically replicating a form textarea

本文关键字：区域 文本 表单 复制 动态      更新时间：2023-09-26

我是Javascript新手。我正在尝试创建一个用来写评论的页面。我在某一点上卡住了。

应该有一个按钮来添加一个部分，复制整个部分的div，以允许用户编写另一个部分。

下面是我的代码。我正在使用CKeditor插件，允许最终用户按照自己的意愿格式化他们的文本。

当前的代码，在创建一个新节时，不允许用户写入已创建的文本区域。请告诉我哪里搞错了。

    <?php
    include 'settings.php';
    if (!isset($dbc)){
        $dbc = new mysqli(DB_HOST , DB_USER , DB_PASSWORD , DB_NAME);
    }
    if ($dbc -> connect_error){
        die ("Cannot connect to the database");
    }
?>
<html>
    <head>
        <title>Write a new Review.</title>
        <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form id = "new_review" action = "form.php" method = "post">
            <div id = "header">
                <h2> Header Section. </h2>
                Author : <input type = "text" id = "author"> <br>
                Title: <input type = "text" id = "title"> <br>
                Tagline: <input type = "text" id = "tagline" > <br>
                Score: <input type = "text" id = "score" > <br>
                Pros:   <textarea class = "ckeditor" id = "pros">
                            Please enter the pro's of the product here.
                        </textarea>
                Cons:   <textarea class = "ckeditor" id = "cons">
                            Please enter the cons of the product here.
                        </textarea>
                Verdict:<textarea class = "ckeditor" id = "verdict">
                            Enter your vedict here.
                        </textarea>
            </div>              
            <div id = "sections">
                <h2> Sections. </h2>
                <input type = "button" id="button" onclick="duplicate()">Add a section</button>
                <div class = "section_base" id = "section">
                    Section Icon: <input type="file" id="icon" accept="image/*"> <br>
                    Section Title: <input type = "text" id = "section_title" > <br>
                    Section Text:   <textarea class = "ckeditor" id = "section_text">
                                    Enter you text here.
                                    </textarea>
                    Section Score: <input type = "text" id = "section_score">
                </div>
            </div>
            <div id = "conclusion">
                <h2> Conclusion: </h2>
                <textarea class = "ckeditor" id = "conclusions">
                    Enter your conclusion here.
                </textarea>
            </div>
            <input type = "submit" value="submit">
        </form>
        <script type="text/javascript">
                var i = 0;
                var original = document.getElementById('section');
                function duplicate() {
                    var clone = original.cloneNode(true); // "deep" clone
                    clone.id = "section" + ++i;
                    // or clone.id = ""; if the divs don't need an ID
                    original.parentNode.appendChild(clone);
                }
            </script>
    </body>
</html>

下面是我所做的信息的链接。

http://ckeditor.com/ckeditor_4.3_beta/samples/replacebyclass.html

我如何复制一个div onclick与javascript?

试试这样写

<script type="text/javascript">
    var i = 1;
    function duplicate() {
        var clone = '<div class = "section_base" id = "section">Section Icon: <input type="file" id="icon" accept="image/*"> <br> Section Title: <input type = "text" id = "section_title" > <br> Section Text:   <textarea id = "section_text'+i+'"> Enter you text here. </textarea>Section Score: <input type = "text" id = "section_score"> </div>';
        var div = document.getElementById('sections');
        var newdiv = document.createElement('div');
        newdiv.innerHTML = clone;
        div.appendChild(newdiv);
        CKEDITOR.replace('section_text'+i);
        i++;
   }
</script>

似乎CKEditor在绑定动态添加元素的控件时遇到了一些问题。你可以参考这个问题，它包含了面临类似问题的人们的讨论和他们的解决方案。

CKEDITOR inline on dynamic created element (dropable/sorable)

还找到了这个jsfiddle演示，它绑定了CKEditor inline

CKEDITOR.inline( el.get( 0 ) );

这个家伙还写了一个很好的教程，关于如何在动态创建的元素上添加内联ckeditor

相关文章：