问输入的JavaScript跨度
EN

Stack Overflow用户

提问于 2018-07-24 08:12:17

回答 3查看 34关注 0票数 -1

我正在处理我的网站需求中的一种情况，我希望用户能够单击一些文本(由<span>包围)，并将其转换为输入框，然后在编辑或失去焦点后返回到纯文本。

我发现到处都是东西，但没有一个是真正有效的！

完全相同的jsfiddle在我的实际网页中不起作用。这是我的页面的代码，我希望有人向我解释为什么它不工作，并帮助我修复它。

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(function() {
    $('span').live('click', function() {
      var input = $('<input />', {
        'type': 'text',
        'name': 'aname',
        'value': $(this).html()
      });
      $(this).parent().append(input);
      $(this).remove();
      input.focus();
    });

    $('input').live('blur', function() {
      $(this).parent().append($('<span />').html($(this).val()));
      $(this).remove();
    });
  });
</script>

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .box {
    border: 1px;
    border-style: solid;
    padding: 1px;
  }
  
  .rotated {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  table {
    empty-cells: show;
    padding: 0px;
    border-spacing: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .padd {
    padding: 0px;
  }
  
  .padding {
    padding: 0px;
  }
</style>



<body>
  <div style="margin: 0 auto; width: 40%;">

    Currently Viewing.
    <div style=" width: 100%; display: flex;
         border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
      <div style="width: 25%;">Date:</div>
      <div style="width: 25%;">asdasdasd</div>
      <div style="width: 25%;">Client: </div>
      <div style="width: 25%;">asdsd</div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
             border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Style #:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Season / Year: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Size Range:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;"> Preparation/Thread: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Sample Size:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Description: </div>
        <div style="width: 25%;"> asdsd</div>
      </div>
    </div>


    <br> Before....

    <span>
                  test
               </span>


    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

    <br> After...
    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>

        </td>
        <td class="box padding">

        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

  </div>



  </div>
</body>

</html>

我在试着把这部分变成文本框

  <br>
    Before....

        <span>
              test
           </span>


    <br>

javascript

回答 3

Stack Overflow用户

发布于 2018-07-24 08:18:53

将.live()更改为.on()，因为.live()函数已弃用。

下面是工作代码：

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $(function() {
    $('span').on('click', function() {
      var input = $('<input />', {
        'type': 'text',
        'name': 'aname',
        'value': $(this).html()
      });
      $("#container").append(input);
      $("#testSpan").remove();
      input.focus();
    });

    $('input').on('blur', function() {
      $(this).parent().append($('<span />').html($(this).val()));
      $(this).remove();
    });
  });
</script>

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .box {
    border: 1px;
    border-style: solid;
    padding: 1px;
  }
  
  .rotated {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  table {
    empty-cells: show;
    padding: 0px;
    border-spacing: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .padd {
    padding: 0px;
  }
  
  .padding {
    padding: 0px;
  }
</style>



<body>
  <div style="margin: 0 auto; width: 40%;">

    Currently Viewing.
    <div style=" width: 100%; display: flex;
         border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
      <div style="width: 25%;">Date:</div>
      <div style="width: 25%;">asdasdasd</div>
      <div style="width: 25%;">Client: </div>
      <div style="width: 25%;">asdsd</div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
             border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Style #:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Season / Year: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Size Range:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;"> Preparation/Thread: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Sample Size:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Description: </div>
        <div style="width: 25%;"> asdsd</div>
      </div>
    </div>


    <br> Before....
<div id="container">
    <span id="testSpan">test</span>
    </div>


    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

    <br> After...
    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>

        </td>
        <td class="box padding">

        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

  </div>



  </div>
</body>

</html>

票数 2

Stack Overflow用户

发布于 2018-07-24 08:17:19

jQuery 1.7中弃用了.live()，1.9中将其完全删除。您使用的是3.3.1，因此您应该使用.on()。

票数 1

Stack Overflow用户

发布于 2018-07-24 08:22:49

如果您运行堆栈片段，您将看到一个错误，显示为$(...).live is not a function。它在v1.9中被删除了。

您必须使用on()创建自己的事件委派

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(function() {
    $(document).on('click', 'span', function() {
      var input = $('<input />', {
        'type': 'text',
        'name': 'aname',
        'value': $(this).html()
      });
      $(this).after(input);
      $(this).remove();
      input.focus();
    });

    $(document).on('blur', 'input', function() {
      $(this).after($('<span />').html($(this).val()));
      $(this).remove();
    });
  });
</script>

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .box {
    border: 1px;
    border-style: solid;
    padding: 1px;
  }
  
  .rotated {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  table {
    empty-cells: show;
    padding: 0px;
    border-spacing: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .padd {
    padding: 0px;
  }
  
  .padding {
    padding: 0px;
  }
</style>



<body>
  <div style="margin: 0 auto; width: 40%;">

    Currently Viewing.
    <div style=" width: 100%; display: flex;
         border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
      <div style="width: 25%;">Date:</div>
      <div style="width: 25%;">asdasdasd</div>
      <div style="width: 25%;">Client: </div>
      <div style="width: 25%;">asdsd</div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
             border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Style #:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Season / Year: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Size Range:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;"> Preparation/Thread: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Sample Size:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Description: </div>
        <div style="width: 25%;"> asdsd</div>
      </div>
    </div>


    <br> Before....

    <span>
                  test
               </span>


    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

    <br> After...
    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>

        </td>
        <td class="box padding">

        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

  </div>



  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51488755

复制

相似问题

问输入的JavaScript跨度
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入的JavaScript跨度EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入的JavaScript跨度
EN