怎么在点击确定按钮后退出 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输入框会出现
展开
收起
1
条回答
写回答
写回答
-
给你动态生成的input绑定一个keyup或者keydown事件。我都做法是监听回车键Enter。
// 首先给你动态生成的 input 给一个 id 或者 class ，方便获取 dom 。
o.innerHTML = ""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:17:54赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
