跨瀏覽器可編輯範圍

Question

Here是一個可編輯span元素的簡單示例。

跨度元素可以通過單擊lt - 輸入出現編輯。

<span>Hello</span> 
<input type="text" style="display:none;" value=""/> 
<style> 
    span, input {  
     font-family: arial, sans-serif; 
     font-size: 14px; 
    } 
    span { 
     cursor: pointer; 
    } 
</style> 
<script> 
    $(function() { 
     $("span").click(function() { 
      $(this).hide(); 
      $("input").val($(this).text()).show(); 
     }); 
     $("input").keypress(function(e) { 
      if (e.which == 13) { 
       $(this).hide(); 
       $("span").text($(this).val()).show(); 
      } 
     }); 
    }); 
</script> 

我想輸入的文字是在跨文字的確切位置。

所以我加入了邊距：

使用Chrome：

input { 
    margin-left: -2px; 
    margin-top: -2px; 
} 

對於IE 10和Opera：

input { 
    margin-left: -3px; 
    margin-top: -2px; 
} 

對於Firefox：

input { 
    margin-left: -4px; 
    margin-top: -2px; 
} 

燦我做了一個通用的CSS在其中工作任何瀏覽器沒有任何特殊的技巧？

Answer 1

contenteditable屬性應該適合你。它的工作原理是all the way back to ie5.5。

<span contenteditable></span>

http://jsfiddle.net/CCJMe/