我有一個最大值爲10的文本框，並且我希望#pid p標籤可以寫入剩餘字符的數量。寫出manu字符在文本框中的剩餘方式

HTML：

<textarea id="content" maxlength="10"></textarea> 
<p id="pid">max 10 chars</p>

的javascript：

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

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

function charsLeft() { 

    for (var i = 10; i >= 1; i--) { 

    contentCount = 10; 

    pid.innerHTML = parseInt(contentCount - 1); 

    } 

} 

content.onkeypress = charsLeft;

所有我能夠做到的是，當我開始打字，我看到9，但我繼續鍵入它保持爲9

fiddle

我想用純JS做到這一點，沒有庫。

來源

2013-05-04 dzumla011

你在開玩笑？你從10中減去1，你很驚訝你會得到9反覆？ – Malvolio 2013-05-04 17:22:48

我希望因爲loop的第一個contentCount會是9，所以9-1 = 8，然後是8，那麼8-1等等。 – dzumla011 2013-05-04 17:23:44

因爲你在'for循環的**內部放置了'contentCount = 10' **，所以它在每個循環中被設置爲10。這就是爲什麼你總是得到9. – jdepypere 2013-05-04 17:27:26

function charsLeft() { 
    pid.innerHTML = content.value.length > 0 ? content.getAttribute("maxlength") - content.value.length + " chars left" : "max 10 chars"; 
} 
content.onkeyup = charsLeft;

見DEMO。

來源

2013-05-04 17:27:23 Antony

爲什麼不使用「textContent」？ https://developer.mozilla.org/en-US/docs/DOM/Node.textContent – 2013-05-04 17:29:19

我知道我很複雜。 – dzumla011 2013-05-04 17:38:00

@ dzumla011是的，你不需要一個循環。 – Antony 2013-05-04 17:38:50

jQuery的

$('document').ready(function(){ 
    var text_max = $('#content').attr('maxlength'); 
    $('#pid').html(text_max+' characters remaining'); 

    $('#content').keyup(function(){ 
    var text_length =$('#content').val().length; 
    var text_remaining =text_max - text_length; 
    // alert(text_remaining + ' ' +text_length + ' ' +text_max); 
    $('#pid').html(text_remaining+' characters remaining'); 
    }); 
});

來源

2013-05-04 17:25:11

我希望能用純JS完成它，但我會從這個jquery中看到，如果我能做到的話。 – dzumla011 2013-05-04 17:27:17

工作演示http://jsfiddle.net/cse_tushar/cNLwM/ – 2013-05-04 17:27:49

你可以一起工作「KEYUP」 - 活動

document.getElementById("mybox").addEventListener("keyup", calcRemainingChars)

http://jsfiddle.net/XHgQy/

來源

2013-05-04 17:27:47

嗯，你的錯誤是你重新聲明您的評論，每次你打電話給你算功能。你必須讓你的評論計算一個全局變量。

您版本的修復程序數字符：

var content = document.getElementById('content'), 
    contentCount = 10; 

function charsLeft() { 
    var pid = document.getElementById('pid'); 

    for (var i = 10; i >= 1; i--) { 
    pid.innerHTML = parseInt(contentCount - 1); 

    } 

}  
content.onkeypress = charsLeft;

我不這樣做，但是，建議您製作一個用於計算字符數量的全局變量。在你的方法'退格'不被視爲給出不準確的計數。我建議你計算字符數量的方式是調用'長度'成員。

我的建議

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

function charsLeft() { 
    var pid = document.getElementById('pid'); 
    pid.innerHTML = (content.value.length > 0 ? content.value.length + " chars left!" : "max 10 chars"); 
} 
content.onkeypress = charsLeft;

Fiddle

來源

2013-05-04 17:31:52 dotTutorials

寫出manu字符在文本框中的剩餘方式

回答

jQuery的

相關問題