Question

在我的管理部分，我有一个“编辑”按钮

点击编辑时，内容应该是可编辑的

演示代码：

<ul>
    <li>
        <a onblur="noteditable(this);" >DisplayName</a>
        <span onclick="return editables(this);" >edit</span>
    </li>
    <li>
        <a onblur="noteditable(this);" >DisplayName</a>
        <span onclick="return editables(this);" >edit</span>
    </li>
</ul>

JS：

editables = function (Tabs) {
    $(Tabs).prev().attr('contenteditable', 'true').focus(); 
}

noteditable = function (Tabs) {
    $(Tabs).attr('contenteditable', 'false');
}

的 Fiddle Demo

问题：如何将光标放在最后？

Answer 1

试试此代码

$.fn.focusEnd = function() {
    $(this).focus();
    var tmp = $('<span />').appendTo($(this)),
        node = tmp.get(0),
        range = null,
        sel = null;

    if (document.selection) {
        range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        range = document.createRange();
        range.selectNode(node);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
    tmp.remove();
    return this;
}

http://jsfiddle.net/nikhilsreeni/K2Kun/3/

将光标设置在动态更改的contenteditable html标记的末尾

1 个答案: