扫码消费数量栏点击可编辑，失去焦点还原样式

可编辑列表项示例

MonroeYu

于 2017-03-03 14:00:00 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_37238192/article/details/86150085

本文介绍了一个简单的HTML页面示例，该示例允许用户通过点击列表项来编辑其内容。当点击列表项时，其内容变为可编辑的输入框，用户可以在其中修改值；当输入框失去焦点时，新值将被保存并显示。

扫码消费数量栏点击可编辑，失去焦点还原样式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>changevalue</title>
</head>
<body>
   <ul>
       <li onclick="changeValue(this)">1</li>
       <li onclick="changeValue(this)">2</li>
       <li onclick="changeValue(this)">3</li>
   </ul>
</body>
<script type="text/javascript" href="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
   var isEdit=0;
   function changeValue(li){
       if (isEdit++!=0) {
           return false;
       }
       var oldValue=li.innerHTML;
       li.innerHTML="<input onblur='confirmChange(this)' value='"+oldValue+"'/>";
   }
   function confirmChange(input){
       var newValue=input.value;
       var li=input.parentNode;
       li.innerHTML=newValue;
       isEdit=0;
   }
</script>
</html>