3

編集可能な 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>

入力のテキストをスパンのテキストと同じ位置に配置したい。

だから私はマージンを追加しています：

クロムの場合:

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 を作成できますか?

4

1 に答える 1

11

contenteditable属性はあなたのために働くはずです。ie5.5までずっと機能します。

<span contenteditable></span>

http://jsfiddle.net/CCJMe/

于 2013-10-11T13:24:08.810 に答える