Javascript剩餘沒有輸入的字符

是否有可能產生一個純的Javascript文本剩餘計數器，輸出<span>或<p>標記中的值而不是input字段？我只能找到JQuery解決方案或在input字段中輸出的解決方案。Javascript剩餘沒有輸入的字符

2012-07-01 Lodder

感謝分享，但這不是在Stack Overflow上呈現它的正確形式。你應該問「我該怎麼辦」的問題，你可以自己回答這個問題，如果你想分享自己的解決方案 –

重新彼得的評論，更多的閱讀和官方立場：http://blog.stackoverflow.com/2011/07/其-OK-到問一答，你自己的問題/ –

你可能會想通過'charsleft'跨度作爲參數傳遞給函數以及的ID，否則將不可能在每個頁面上多次使用它。 –

已經經歷過，很多人都想要一個剩餘的字符計數器，但純JavaScript，並在輸入框中沒有預覽數淨。我lastnight瞎搞用的jsfiddle和周圍做了一些工作，能夠得到其餘的字符在其他標記，如<span>顯示。所以我只想和大家分享一下，希望它能派上用場。

HTML：

<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea> 
<span id="charsleft"></span>

的Javascript：

<script> 
    function textCounter(textarea, countdown, maxlimit) { 
     var textareaid = document.getElementById(textarea); 
     if (textareaid.value.length > maxlimit) 
      textareaid.value = textareaid.value.substring(0, maxlimit); 
     else 
      document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)'; 
     } 
</script> 

<script type="text/javascript"> 
    textCounter('message','messagecount',100); 
</script>

這裏同時工作JSFiddle

注：如果有人要爲這些腳本，使之更好，請隨時這樣做。我不是Javascript的專家，所以它很可能是一個更加用戶友好的解決方案。

親切的問候

來源

2012-07-01 15:35:46 Lodder

您正在製作'textareaid'全球。使用'var textareaid'。另外我認爲，當達到最大限制時，而不是每次都有子字符串，我們可以在'onKeyDown'事件上返回false' – Jashwant

@Jashwant：已經將'textareaid'改爲'var textareaid'但是不知道如何去處理建議。如果你能編輯我的JSFiddle，那將不勝感激 – Lodder

如果你把jQuery的網頁上類似於下面的東西也應該工作（和你爲什麼不:)）：

$('#text-input-area').keyup(function(){ 
    $('#target-div').text(max_length-$(this).val().length + " characters remaining"); 
})

來源

2012-07-01 15:46:47 Andbdrew

我使用的方法是純Javascript，因爲我沒有看到只爲一個小函數加載整個庫的意義。 – Lodder

@Lodder aw來吧，你會用它！ :) – Andbdrew

Lodder的答案是完美的 - 除了我無法在同一頁面上重複使用它。我調整了代碼以傳遞跨度的名稱，因此可以在同一頁面上重新使用它。

<script> 
function textCounter(textarea, countdown, maxlimit, nameofspan) { 
    var textareaid = document.getElementById(textarea); 
    if (textareaid.value.length > maxlimit) 
     textareaid.value = textareaid.value.substring(0, maxlimit); 
    else 
     document.getElementById(nameofspan).innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)'; 
    } 
</script> 


<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100,'messagespan');" onKeyUp="textCounter('message','messagecount',100,'messagespan');"></textarea> 
<span id="messagespan"></span> 

<script type="text/javascript"> 
    textCounter('message','messagecount',100,'messagespan'); 
</script>

來源

2017-08-10 14:32:30

Javascript剩餘沒有輸入的字符

回答

相關問題