开发者社区> 问答> 正文

怎么在点击确定按钮后退出 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输入框会出现

展开
收起
杨冬芳 2016-06-01 19:21:26 2929 0
1 条回答
写回答
取消 提交回答
  • IT从业

    给你动态生成的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';
    });
    2019-07-17 19:23:43
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载