Question

我有一个可编辑的h2标签和一个可编辑的p ta和两个输入，我试图从可编辑的h2和p标签中获取数据并将它们分配给输入。我该怎么做？这是我的代码：

<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    </head>
    <body class="yin">
                    <nav id="nav">
                <ul class="links">
                    <li><h3 class="heading-title">Publish</h3>

                <p style="font-size: 10px; line-height: 18px; margin-top: -15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
                    <li><h3 class="heading-title sub">cover</h3></li>
                        <input type="button" name="upload" value="Upload" >
                    <li><h3 class="heading-title sub">blurb</h3></li>
                        <textarea name="blurb" id="blurb" placeholder="170 character limit. Keep it short. Keep it sweet." maxlength="170"></textarea>
                    <li><h3 class="heading-title sub">genre</h3></li>
                         <select id="genre" name="genre">
                            <option value="Fantasy">Fantasy</option>
                            <option value="Romance">Romance</option>
                            <option value="Humor">Humor</option>
                            <option value="Adventure">Adventure</option>
                            <option value="Personal">Personal</option>
                            <option value="Horror">Horror</option>
                         </select>
                        <a href="#" class="subscribe">+</a>
                        <a href="#" id="sub-publish" class="publish" onclick="document.getElementById('theSbmit').click()" >Publish</a>

                        <!-- damn contenteditable can't be passed on --><form id="form" method="post">
                        <input type="text" name="title" id="form-title"></input>
    <textarea name="story" id="form-message"></textarea>
    <input type="submit" id="theSubmit" value="submit"></input></form>

                        <!-- save -->

                    <li><h3 class="heading-title">save</h3>
                    <p style="font-size: 10px; line-height: 18px; margin-top: -15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li>
                    <li><h3 class="heading-title sub">notes</h3></li>
                        <textarea id="notes" placeholder="Reminders and/notes to yourself?"></textarea>
                        <a href="#" class="publish">Save</a>
                 </ul>
            </nav>


    <!-- Main -->
            <section id="main" class="wrapper" style="overflow-x: hidden;">
                <div class="container">

                    <header class="major special">
                        <h2 contenteditable="true" id="titled">Your Title</h2>
                        <p>Chapter 1</p>
                    </header>
                    <article >
                    <p id="storyd" contenteditable="true">Vi accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit ac amet faucibus aliquet placerat commodo. Interdum ante aliquet commodo accumsan vis phasellus adipiscing. Ornare a in lacinia. Vestibulum accumsan ac metus massa tempor. Accumsan in lacinia ornare massa amet. Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan.</p>

                    </article>

                </div>
            </section>

        <!-- JS -->
    <script type="text/javascript">
var $form = $('form');
$form.submit(function(e) {
    var title = $('#titled').text(),
    var story = $('#storyd').text();

    $form.find('input[name="title"]').val(title);
    $form.find('input[name="story"]').val(story);
return false;


});

        </script>

        </body>
</html>

输入在导航和可编辑的h2和p on部分。请帮忙！

Answer 1

您的代码似乎与一个小错误分开。在你的JS中，行var title = $('#titled').text(),以逗号（,）而不是分号（;）结束。

您还可以在表单提交功能的第一行中使用e.preventDefault();，以防止页面重定向到表单发布目标。希望这有帮助！

Answer 2

如Zak所述，您在var title = $('#titled').text()

末尾放置了一个逗号而不是分号

此外，$form.find('input[name="story"]').val(story);应为$form.find('textarea[name="story"]').val(story);

从可编辑H2获取数据到输入

2 个答案: