Javascript 用户在文本框（HTML）中写入时的动态文本限制_Javascript_Html

Javascript 用户在文本框（HTML）中写入时的动态文本限制

javascript html

Javascript 用户在文本框（HTML）中写入时的动态文本限制,javascript,html,Javascript,Html,我需要在Html/javascript（或者php是可能的）中实现一个类似于twitter的脚本，当用户在字段中写入文本时，标签会发生变化，显示留下的字符你能帮我举一个简单和简单脚本示例吗？ <script> function checkCharCount(textfield){ if(textfield.value.length > 300) textfield.value = textfield.value.substr(0, 300); document

我需要在Html/javascript（或者php是可能的）中实现一个类似于twitter的脚本，当用户在字段中写入文本时，标签会发生变化，显示留下的字符

你能帮我举一个简单和简单脚本示例吗？


<script>
function checkCharCount(textfield){
    if(textfield.value.length > 300) textfield.value = textfield.value.substr(0, 300);
    document.getElementById("charCounter").innerHTML = 300 - textfield.value.length;
}
</script>

<textarea class="input" name="REMARK" rows="5" cols="45" maxlength="300" wrap="virtual" onKeyUp="checkCharCount(this);"></textarea> 
<div><span id="charCounter">300</span> characters left.</div> 

函数checkCharCount（textfield）{
如果（textfield.value.length>300）textfield.value=textfield.value.substr（0，300）；
document.getElementById（“charCounter”）.innerHTML=300-textfield.value.length；
}
还剩300个字符。

我想要一个JQuery插件，比如。用PHP来实现这一点是可能的，但会非常。。好。。错。由于PHP是在服务器上运行的，所以每次按下键都必须向服务器发送/接收消息。Javascript在客户端运行，因此不需要额外的负载。Hover您可以在PHP中指定最大值，在原始响应中将其发送到客户端，并在客户端javascript中使用它。

Tim Down让我对使用鼠标而不是键盘检测粘贴的方法感到好奇。在网上花了一个小时，在一个测试页面上反复尝试之后，我有了这个非常简单但有效的跨浏览器解决方案，它在功能上满足了我，但在方法上可能无法满足javascript纯粹主义者的要求。（嘿，只是想帮忙）


函数checkCharCount（）{
textfield=document.getElementById（'remark'）；
//if（textfield.value.length>300）//在下次粘贴或键控之前不注册长度更改
textfield.value=textfield.value.substr（0，300）；
document.getElementById（“charCounter”）.innerHTML=300-textfield.value.length；
}
还剩300个字符。

请参见中的参考和浏览器兼容性说明

并查看他们值得收藏的演示页面，在我看来，

+1因为没有发布“使用jQuery和jqInputLimit插件等等”。你可能想要处理

剪切

和

粘贴

事件，也可能是

mouseup

用于用户将一些文本拖到输入框中的情况。使用键盘进行剪切和粘贴已经适用于给定的脚本，并且使用鼠标粘贴将不允许您粘贴超过300个字符（在我的示例中），因为文本区域中的maxlength=“300”（在大多数浏览器中）。然而，这是一个深思熟虑的考虑，蒂姆。蒂姆，你让我想到了这一点，我甚至在会议上看到了你的答案，然后对DOMCharacterDataModified进行了实验，最终提出了一种跨浏览器的方式，我怀疑，这种方式会受到批评，但这里是[见我的第二篇帖子]+1。这是一个完全合理的方法。只有一件事：最好向窗口传递函数引用而不是字符串。setTimeout调用：

onpaste=“window.setTimeout（checkCharCount，20）；”

。使用字符串相当于调用

eval（）

，这很危险，应该避免。

<head>
<script>
function checkCharCount(){
    textfield = document.getElementById('remark');
    //if(textfield.value.length > 300) // does not register length change until the next paste or keyup
    textfield.value = textfield.value.substr(0, 300);
    document.getElementById("charCounter").innerHTML = 300 - textfield.value.length;
}
</script>
</head>
<body>

<textarea id="remark" class="input" name="remark" rows="5" cols="45" wrap="virtual" onkeyup="checkCharCount();" onpaste="setTimeout(checkCharCount, 20);"></textarea> 
<div><span id="charCounter">300</span> characters left.</div>

</body>