php 文本框改值光标移动到最后,如何将光标移动到内容可编辑实体的末尾

小编典典

还有另一个问题。

如果的解决方案工作contenteditableDIV不包含其他元素multilined。

例如，如果一个div包含其他div，而这些其他div里面包含其他内容，则可能会出现一些问题。

为了解决这些问题，我安排了以下解决方案，它是对Nico的解决方案的改进：

//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/

(function( cursorManager ) {

//From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements

var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

//From: https://stackoverflow.com/questions/237104/array-containsobj-in-javascript

Array.prototype.contains = function(obj) {

var i = this.length;

while (i--) {

if (this[i] === obj) {

return true;

}

}

return false;

}

//Basic idea from: https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text

function canContainText(node) {

if(node.nodeType == 1) { //is an element node

return !voidNodeTags.contains(node.nodeName);

} else { //is not an element node

return false;

}

};

function getLastChildElement(el){

var lc = el.lastChild;

while(lc && lc.nodeType != 1) {

if(lc.previousSibling)

lc = lc.previousSibling;

else

break;

}

return lc;

}

//Based on Nico Burns's answer

cursorManager.setEndOfContenteditable = function(contentEditableElement)

{

while(getLastChildElement(contentEditableElement) &&

canContainText(getLastChildElement(contentEditableElement))) {

contentEditableElement = getLastChildElement(contentEditableElement);

}

var range,selection;

if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+

{

range = document.createRange();//Create a range (a range is a like the selection but invisible)

range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range

range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start

selection = window.getSelection();//get the selection object (allows you to change selection)

selection.removeAllRanges();//remove any selections already made

selection.addRange(range);//make the range you have just created the visible selection

}

else if(document.selection)//IE 8 and lower

{

range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)

range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range

range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start

range.select();//Select the range (make it the visible selection

}

}

}( window.cursorManager = window.cursorManager || {}));

用法：

var editableDiv = document.getElementById("my_contentEditableDiv");

cursorManager.setEndOfContenteditable(editableDiv);

这样，游标肯定会定位在最后一个元素的末尾，并最终嵌套。

编辑＃1 ：为了更通用，while语句还应该考虑所有其他不能包含文本的标记。这些元素被称为 void元素

，在这个问题上，有一些方法可以测试元素是否为void。因此，假设存在一个调用的函数canContainText，true如果参数不是void元素，则该函数返回以下代码行：

contentEditableElement.lastChild.tagName.toLowerCase() != 'br'

应替换为：

canContainText(getLastChildElement(contentEditableElement))

编辑＃2 ：上面的代码已完全更新，描述和讨论的每个更改

2020-04-25