首页 > 怎么在点击确定按钮后退出 input 编辑状态,并且按钮恢复到修改按钮

怎么在点击确定按钮后退出 input 编辑状态,并且按钮恢复到修改按钮

<div class="row cl">
<label class="form-label col-3">测试:</label>
<div class="formControls col-6">
<label><span id="OrderTime">待修改文字</span></label>
</div>
<input id="changeOrderTime" type="button" value="修改" onclick="changeOrderTime()"/>
<button style="display:none" id="timeChangeOK">确定</button>
<script type="text/javascript">
function changeOrderTime(){
document.getElementById('timeChangeOK').style.display='block'; 
document.getElementById('changeOrderTime').style.display='none';
var o = document.getElementById("OrderTime");
var c = o.innerHTML;
o.innerHTML = "<input type='text' value='" + c + "'/>"
}
</script>
</div>

现在这段代码是可以在点击修改后 按钮变为确定,并且input输入框会出现


给你动态生成的input绑定一个keyup或者keydown事件。我都做法是监听回车键Enter

// 首先给你动态生成的 input 给一个 id 或者 class ,方便获取 dom 。
o.innerHTML = "<input type='text' id='demo' value='" + c + "'/>"

function changeOrderTime(){
    document.getElementById('timeChangeOK').style.display='block'; 
    document.getElementById('changeOrderTime').style.display='none';
    var o = document.getElementById("OrderTime");
    var c = o.innerHTML;
    o.innerHTML = "<input type='text' id='demo' value='" + c + "'/>"
}
timeChangeOK.addEventListener('click', function(){
    var o = document.getElementById("OrderTime");;
    o.innerHTML = document.getElementById('demo').value;

    document.getElementById('timeChangeOK').style.display='none'; 
    document.getElementById('changeOrderTime').style.display='block';
});

用了jquery简单的写了一下,这里是提前把 input写到 html里面,在js控制显示或者隐藏操作。

<div class="row cl">
<label class="form-label col-3">测试:</label>
<div class="formControls col-6">
<label><span id="OrderTime">待修改文字</span>
    <input type="text" id="OrderTimeInput" style="display:none"/>
</label>
</div>
<input id="changeOrderTime" type="button" value="修改" onclick="changeOrderTime()"/>
<button style="display:none" id="timeChangeOK">确定</button>
<script type="text/javascript">
function changeOrderTime(){
    var spanValue = $("#OrderTime").text();
    $("#OrderTimeInput").val(spanValue);
    $("#OrderTimeInput").show();
    $("#OrderTime").hide();
    $("#changeOrderTime").hide();
    $("#timeChangeOK").show();
}
$("#timeChangeOK").click(function(){
    var inputValue = $("#OrderTimeInput").val();
    $("#OrderTime").text(inputValue);
    $("#OrderTimeInput").hide();
    $("#OrderTime").show();
    $("#changeOrderTime").show();
    $("#timeChangeOK").hide();
});
</script>
【热门文章】
【热门文章】