Javascript 限制输入字段实时预览中显示的字符数

当我在输入字段中键入文本时，该值将在

p

元素中实时显示：

如何在预览中最多只显示25个字符？ 我尝试使用一些在这个网站上找到的方法，但它们似乎对我不起作用

文本溢出：省略号

-无效

谢谢你的建议

HTML

试试这个：

使用所记录的

slice（）

更新：

我从ragatskynet那里得到了这个想法，如果输入的字符数超过25个字符，我会在末尾添加点。请参见此处的JSFIDLE：

您可以使用

substr（）

var wpcoment=document.getElementById（'typedtext'）；
wpcoment.onkeyup=wpcoment.onkeypress=function（）{
如果（this.value.length

var wpcoment=document.getElementById（'typedtext'）；
wpcoment.onkeyup=wpcoment.onkeypress=function（）{
if（document.getElementById（'preview'）.innerText.length<25）{
document.getElementById（'preview'）.innerHTML=this.value；
}
}
试试这个

var wpcomment = document.getElementById('typedtext');
var count=1;
wpcomment.onkeyup = wpcomment.onkeypress = function(){
    if(count<=50){
         document.getElementById('preview').innerHTML = this.value;

     }
     count++;
 }

var wpcoment=document.getElementById（'typedtext'）；
var计数=1；
wpcoment.onkeyup=wpcoment.onkeypress=function（）{
如果（countThis如果文本长度为25个字符或更多，它不会预览任何内容，是吗？！好的，对不起。你说得有道理。然而，一旦达到字符限制，在我的示例中，零到二十五个字符的部分将不再更新。你注意到了吗？在我看来，if子句在这里是多余的。
substr
仍然适用于字符数少于用作截止限值的字符串。当然可以（我的原始代码是按您认为的方式编写的），但如果小于25个字符，则不需要添加点。我在解决方案中将它们作为匿名函数实现，以避免将
此.value
赋值两次。您的第一个示例对我很有用。我感谢这里的所有答案。
var wpcomment = document.getElementById('typedtext');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    document.getElementById('preview').innerHTML = this.value;
}

var wpcomment = document.getElementById('typedtext');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    document.getElementById('preview').innerHTML = this.value.slice(0,25);
}

var wpcomment = document.getElementById('typedtext');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    document.getElementById('preview').innerHTML = this.value.slice(0,25) + function(x) {
        if(x.length > 25) { return " ..."} else {return ""};
    }(this.value);
}

var wpcomment = document.getElementById('typedtext');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    if(this.value.length <= 25){
        document.getElementById('preview').innerHTML = this.value;    
    } else {
        document.getElementById('preview').innerHTML = this.value.substr(0,25) + "...";
    }
 }

var wpcomment = document.getElementById('typedtext');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    if (document.getElementById('preview').innerText.length < 25) {
        document.getElementById('preview').innerHTML = this.value;
    }
}

var wpcomment = document.getElementById('typedtext');
var count=1;
wpcomment.onkeyup = wpcomment.onkeypress = function(){
    if(count<=50){
         document.getElementById('preview').innerHTML = this.value;

     }
     count++;
 }