使用jquery設置文本限制

有一些文字由165個字符組成。我只需要顯示前155個字符，但155個字符中的最後5個應該替換爲「.....」（elipses），其餘字符應該刪除。 fiddle 使用jquery設置文本限制

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     var txt= $('div').text(); 
     for(i=0;i<2;i++){ 
      alert(txt.charAt(150+ i)) 
     } 
    }) 
</script> 
</head> 
<body> 
<div style="width:100px"> 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that 
</div> 
</body>

來源

2013-05-30 Carlos

來吧@TecHunter，他有他嘗試的東西的小提琴。你必須從某個地方開始學習。對於包含小提琴的問題，-1表示他正在嘗試學習，應該讓你自己得到-1。你知道第1天的字符串函數嗎？ – JClaspill

@JClaspill好吧沒關係...你對問題格式 – TecHunter

退房的substring function here，瞧：

var txt= $('#restrict').text(); 
if(txt.length > 155) 
    $('#result').text(txt.substring(0,150) + '.....');

http://jsfiddle.net/techunter/GRmY2/

來源

2013-05-30 15:51:14 TecHunter

你可以刪除粗魯的評論，這將得到upvote。 – JClaspill

好吧對不起，你是對的，我已經看到更糟糕的問題，這是真的。我甚至認爲你的評論是因爲對這個傍晚過於苛刻的自我懲罰：P – TecHunter

根據您定位的瀏覽器，您可以使用css。

text-overflow: ellipsis

來源

2013-05-30 15:48:42 Gabe

好，但太具體imo :) – TecHunter

貌似TecHunter已經發布幾乎同樣的事情，但我覺得很無聊，這樣做。

在155個字符替換最後5個字符與「....」。有一個字符計數器的textarea輸入，可在您輸入時進行更新。

的Html

<div> 
    <h2>Input</h2> 
    <textarea id="sampleInput"> 
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.  The point of using Lorem Ipsum is that 
    </textarea> 
</div> 
<div> 
    <label>Character Count:</label> <span id ="charCounter"></span> 
<div> 
<h2>Output</h2> 
<p style="width:100px" id="sampleOutput"></p>

updateOutput(); 

$('#sampleInput').keyup(function(e){ 
    updateOutput(); 
}); 

function updateOutput(){ 
    var sampleInput = $('#sampleInput').val(), 
     sampleInputLength = sampleInput.length; 

    if(sampleInputLength >= 155) {  
     sampleInput = sampleInput.substr(0,150) + ".....";  
    } 

    $('#charCounter').text(sampleInputLength); 
    $('#sampleOutput').text(sampleInput); 
}

CSS

#sampleInput { 
    width: 400px; 
    height:100px;  
}

jsfiddle

來源

2013-05-30 16:00:54 Jerry

I +1努力:)，因爲你很無聊 – TecHunter

@TecHunter如果我真的很無聊，我會把它變成一個插件。 – Jerry

我看到了一些很好的答案，順便說一下，其中一些在其他情況下效率不高，例如：當您複製和粘貼某些東西時。所以，我建議：

$(document).on('keyup keypress blur change', '#elementId', function() { 
    var maxLength = 100; // number of characters to limit 
    imposeMaxLength($(this), maxLength); 
}); 

function imposeMaxLength(element, maxLength) { 
    if (element.val().length > maxLength) { 
     element.val(element.val().substring(0, maxLength)); 
    } 
}

使用imposeMaxLength的功能，你可以在其他活動重複使用。

來源

2017-05-08 20:38:05 igorsgm

使用jquery設置文本限制

回答

相關問題