前端第二次打开弹出框时，清除上一次的内容_前端多次触发函数时执行并清除上一次-优快云博客

本文链接：https://blog.youkuaiyun.com/csdnyq/article/details/104317204

本文介绍了一种在前端开发中，当弹出框第二次打开时清除上次输入内容的方法。通过JavaScript在弹窗加载时将指定输入框的值设置为空，确保每次打开都是干净的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端第二次打开弹出框时，清除上一次的内容

用js在弹出这个弹出框时，将输入框的内容赋值空字符串’’。
下面的代码就是将两个input的内容变为空。

代码

<a href="#" class="btn btn-success btn-xs" data-toggle="modal"
data-target="#editOrderDialog" onclick="editOrder()">修改订单</a>


<!--弹出框-->
<div class="modal fade" id="editOrderDialog" tabindex="-1" role="dialog" aria-labelledby="updateOrderLabel">
	<div class="modal-dialog" role="document">
    	<div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="updateOrderLabel">修改订单</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" id="edit_order_form">
                    <div class="form-group">
                        <label for="startUseCarDatetime" class="col-sm-3 control-label">从</label>
                        <div class="input-group date starttime col-md-6" data-date-format="yyyy-mm-dd hh:ii:ss" data-link-field="startUseCarDatetime">
                            <input type="text" size="30"  id="startUseCarDatetime" readonly name="startUseCarDate" class="form-control" onchange="setSecond(id)">
                            <!--<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="endUseCarDatetime" class="col-sm-3 control-label">到</label>
                        <div class="input-group date endtime col-md-6" data-date-format="yyyy-mm-dd hh:ii:ss" data-link-field="endUseCarDatetime">
                            <input type="text" size="30"  id="endUseCarDatetime" readonly name="endUseCarDate" class="form-control"  onchange="setSecond(id)">
                            <!--<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
                        </div>
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
            	<!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" οnclick="updateOrder()">确定修改</button>-->
            </div>
        </div>
    </div>
</div>

function editOrder(id, orderNumber) {
	/*将上一次从数据清除*/
	$("#startUseCarDatetime").val('');
	$("#endUseCarDatetime").val('');
	//...
}

如果有错，请大家指正；如果有其他更好的方法，请大家指出。谢谢！