Question

我正在做类似Twitter的文本框。如果文本框长度超过15个字符，则它们应以红色显示。所以我在div内附加了2个span。每当字符附加指针将移动到起始位置。我希望它在最后。任何人请帮助我！谢谢！

或

var tweeet = document.getElementById('tweeet');

tweeet.onkeyup = function(event) {
	var newTweeet = tweeet.textContent;
	if(newTweeet.length > 15){
		tweeet.textContent = "";
		var content = document.createElement('span');
		var extra = document.createElement('span');
		content.textContent = newTweeet.slice(0, 15);
		extra.textContent = newTweeet.slice(15, newTweeet.length)
		extra.style.color = 'red';
		tweeet.appendChild(content);
		tweeet.appendChild(extra);
	}	
};

.tweeet {
    width: 50%;
    height: 100px;
    border-style: inset;
    border-width: 5px;
    border-color: blue;
    background-color: #cccccc;
    margin: 3px;
    padding: 5px;
    float: left;
}

<div class="tweeet" id="tweeet" contenteditable="true"></div>

Answer 1

这确实可以正常工作，我已经对其进行了测试：

var tweeet = document.getElementById('tweeet');

tweeet.onkeyup = function(event) {
    var newTweeet = tweeet.textContent;
    if(newTweeet.length > 15){
        tweeet.textContent = "";
        var content = document.createElement('span');
        var extra = document.createElement('span');
        content.textContent = newTweeet.slice(0, 15);
        extra.textContent = newTweeet.slice(15, newTweeet.length)
        extra.style.color = 'red';
        tweeet.appendChild(content);
        tweeet.appendChild(extra);

        let s = window.getSelection()
        let r = document.createRange()
        r.setStart(tweeet, tweeet.childElementCount)
        r.setEnd(tweeet, tweeet.childElementCount)
        s.removeAllRanges()
        s.addRange(r)

    }   
};

将光标位置移动到以javascript结尾

1 个答案: