jQuery清空模態彈窗中的內容


實現效果:

模態彈窗內包含的內容為:<input>的file類型、<input>的text類型、<textarea>內容、wangEdition富文本框內容

方法:

使用DOM的reset()方法對表單內容進行清空。清空的內容為<form>中的內容。

HTML:

<!-- 模態彈窗 -->
    <div id="modalBox" class="modalBox">
        <form class="modal" id="modal">
            <div class="closeBox">
                <img src="../image/close.jpg" class="close" id="close">
            </div>
            <div class="modalHead">
                <input type="file" name="headImage" id="addFile" style="display:none;" onchange="viewImage()">
                <img src="../image/addFile.jpg" onclick="openFile()" class="addFile" id="foodImage">
                <input type="text" name="foodName" placeholder="food name:" class="nameInput">
            </div>
            <br/>
            <span>簡介/brief</span>
            <textarea class="brief"></textarea>
            <br/>
            <span>制作詳情介紹/detail</span>
            <div id="editor"></div>
            <br/>
            <div class="pushBox">
                <button class="push" id="push">上傳</button>
            </div>
        </form>
    </div>

由於reset()並不是jQuery的方法,因此要通過DOM來使用,方法如下:

$('#modal')[0].reset()

reset()方法不能清空富文本框中的內容。富文本框中的內容以HTML的形式添加到頁面上,因此使用對html元素賦空值的方法進行清空。

$('.w-e-text').html('');


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM