js实现简单的文本框编辑

js实现简单的文本框编辑

• javascrip 编辑

          <div id="ull">
              <input type="text">
              <button>保存</button>
              <button>取消</button>
          </div>
      </li>
  </ul>
  
  <script>
  //获取样式
      var span = document.getElementsByTagName('span')[0]
      var btn = document.getElementsByTagName('button')
      var ipt = document.getElementsByTagName('input')[0]
      var ull = document.getElementById('ull')
      var lii = document.getElementById('lii')
      // 编辑按钮
      btn[0].onclick = function () {
          ull.style.display = 'block'
          lii.style.display = 'none'
          ipt.value = span.innerHTML
      }
       // 保存按钮
      btn[1].onclick = function () {
          ull.style.display = 'none'
          lii.style.display = 'block'
         span.innerHTML =ipt.value 
      }
       // 取消按钮
      btn[2].onclick = function () {
          ull.style.display = 'none'
          lii.style.display = 'block'
         
      }
  </script>