Here是可编辑span元素的一个简单示例。
可以通过单击lt - input来编辑Span元素。
<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>
我希望输入中的文本与span中的文本一致。
所以我添加了边距:
对于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吗?
答案 0 :(得分:10)
contenteditable
属性应该适合您。它有效all the way back to ie5.5。
<span contenteditable></span>