Question

嘿伙计们，我已经在网上看到了这种能力，我不太确定如何搜索它，一个很好的例子是发送一条短信，它会在你输入时说：

132/160 - 并且132计数器将增加，直到达到极限。

我的问题是，是否可以单独使用javascript，没有jQuery库？但是，如果我必须使用jQuery，我可能会指向一个很好的教程，或者它可能比这更简单，甚至可以用一些术语来搜索它，谢谢。

Answer 1

使用支持的oninput事件（所有现代浏览器，IE 9及更高版本）和onpropertychange旧版Internet Explorer：

var myInput = document.getElementById("myInput");
if ("onpropertychange" in myInput && !("oninput" in myInput)) {
    myInput.onpropertychange = function () { 
        if (event.propertyName == "value")
            inputChanged.call(this, event);
    }
}
else
    myInput.oninput = inputChanged;

function inputChanged () {
    // Check the length here, e.g. this.value.length
}

onkeyup 不适合处理输入，因为输入文本的用户和注意到更改的代码之间存在明显的延迟。用户甚至可以按住键（用于在Windows设备上重复文本），但是您的代码无法处理它。

Answer 2

<!--This is your input box. onkeyup, call checkLen(...) -->
<input type="text" id="myText" maxlength="200" onkeyup="checkLen(this.value)">

<!--This is where the counter appears -->
<div id="counterDisplay">0 of 200</div>


<!--Javascript Code to count text length, and update the counter-->
<script type="text/javascript"><!--
    function checkLen(val){
        document.getElementById('counterDisplay').innerHTML = val.length + ' of 200';
    }
//--></script>

Answer 3

我认为我为您的问题找到了一个确切的解决方案 countChar 函数接受一个文本框对象和一个div对象。 div对象将显示剩余的字符数。

function countChar(txtBox,messageDiv)
    {
        try
        {

            count = txtBox.value.length;
            if (count < 160)
            {
                charLeft = 160 - count;
                txt = charLeft + " characters left...keep typing!!";
                messageDiv.innerHTML="<font color=green>" + txt + "</font>";
            }
            else
            {
                messageDiv.innerHTML="<font color=red>Message is too long</font>";
            }
            }
            catch ( e )
            {

            }
    }

<INPUT type="text" id="txtMessage" 
    onkeyup="countChar(txtMessage,messagesuccess);" 
    onkeydown="if(event.keyCode == 13){document.getElementById('btnSendTextMessage').click();}" >

Answer 4

您需要挂钩文本框的onkeyup事件。

然后，您可以验证/检查文本框的值的长度，并且（如果要向用户显示计数器）根据需要更新计数器显示。

Answer 5

这是一个简单的解决方案。

假设您有以下HTML代码

<textarea onKeyPress='return count(this);'></textarea>
<input type="text" id="info" value="0/160" />

注意：输入/文本字段的ID是info。

您需要以下javascript方法

function count(area){
    var proceed = area.value.length < 160;
    document.getElementById('info').value = area.value.length+"/160";
    return proceed;
}

注意：方法中指定的文本字段的ID和大小为160。

Answer 6

此代码用于一般用法：

HTML：

<input type="text" name="noteTitle" id="noteTitle" maxlength="100"   onkeyup="checkLength(this,'titleLength')" />
<div id="titleLength">100</div>

JS：

//take field (fieldToCheckMax), and its counterID(titleLength)
function checkLength(fieldToCheckMax,counterID){

//get the maxallowed for the input
maxAllowed=fieldToCheckMax.getAttribute('maxlength');
//save the affected counter in a variable
counterID=document.getElementById(counterID);
//change the value based on the max allowed, to switch between green and red
counterID.innerHTML=colorChanger();
//the color based checker, to decide is it red or green
function colorChanger(){
    if(fieldToCheckMax.value.length < maxAllowed) {
        counterID.style.color='green';
        return maxAllowed-fieldToCheckMax.value.length;}
    else {
    counterID.style.color='red';
    return maxAllowed-fieldToCheckMax.value.length;
    }

}
}

Answer 7

您需要的只是一个密钥向上处理程序，它检查textarea中字符串的长度。您还可以为textarea提供maxlength属性。

一旦检测到字符串超过160（或限制为wateva）字符，您可以提供警告框，然后将字符串修剪为其前160个字符。

我不会提供代码和勺子喂你。它可以在网上轻松找到。

检查字段长度作为用户类型

7 个答案: