zoukankan      html  css  js  c++  java
  • 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('');
  • 相关阅读:
    Zepto结合Swiper的选项卡
    Angular选项卡
    创建简单的node服务器
    封装ajax
    JQuery和html+css实现鼠标点击放烟花
    js实现螺旋纹理特效
    Angular入门
    Angular JS例子 ng-repeat遍历输出
    Angular 基础教程(1)
    PHP数组
  • 原文地址:https://www.cnblogs.com/cff2121/p/10601408.html
Copyright © 2011-2022 走看看