Here is a simple example of editable span element.
Span element can be edited by clicking on lt - input appears.
<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>
I want the text in input to be in the exact position as the text in span.
So I'm adding the margins:
For Chrome:
input {
margin-left: -2px;
margin-top: -2px;
}
For IE 10 and Opera:
input {
margin-left: -3px;
margin-top: -2px;
}
For Firefox:
input {
margin-left: -4px;
margin-top: -2px;
}
Can I make a universal css which works in any browser without any special tricks?
The contenteditable
attribute should work for you. It works all the way back to ie5.5.
<span contenteditable></span>