可編輯且寬度自適應input

預設的input項是比較難看的，並且它的寬度還無法隨著輸入而變化，這樣未免有些呆板，不過藉助JavaScript可以達到寬度自適應的效果，下麵為了方便使用了jQuery：

<div class="list">
    <span class="list_name">娉娉裊裊</span>
    <input type="text" class="list_name hidden">
</div>

.hidden{
      display: none;
    }

    .list{
      background-color: #303030;
      color: aliceblue;
      display: inline-block;
      font-size: 2rem;
      padding: 0.5rem 1.5rem;
      border-radius: 1rem;
    }
    input{
      border: none;
      outline: none;
      font-size: 2rem;
      background-color: transparent;
      color: #F16665;
      caret-color: aliceblue;
    }

var $span = $("span.list_name");
    var $input = $("input.list_name");
    function onEdit($span){
      $span.hide()
        .siblings("input.list_name")
        .val($span.text())
        .show()
        .focus();
    }
    $span.click(function(){
      onEdit($(this));
    });
    $input.bind("keydown", function(e){
      if(e.keyCode == "13"){
        $(this).hide()
        .siblings("span.list_name")
        .text($(this).val())
        .show();
      }
    })
    $input.bind("blur", function(){
      $(this).hide()
        .siblings("span.list_name")
        .text($(this).val())
        .show();
    });
    $("input[type='text']").bind("focus",function(){
      $(this).css("width",$(this).val().length + "em");
    })
    $("input[type='text']").bind("input propertychange",function(){
      $(this).css("width",$(this).val().length + "em");
    })

點擊此查看樣例