Textarea charCount - 防止用户粘贴

时间:2012-04-30 20:10:25

标签: javascript jquery html

下面的代码工作正常,但如果我粘贴一个超过10个字符的字符串,它应该只粘贴前10个字符。目前它没有这样做,如何防止粘贴10个以上的字符?

http://jsfiddle.net/qfzkw/2/

3 个答案:

答案 0 :(得分:2)

如上所述,<textarea maxlength="10">适用于少量案例 - 但不是所有

很难确定如何阻止用户(例如在Firefox中)进入文本区域,选择浏览器菜单Edit,然后点击Paste。我真的不知道如何防止这种情况。您可以检查keydown事件以阻止ctrl + v。您可以禁用上下文菜单以禁止右键单击文本区域(尽管恶意用户可以编辑前端javascript,然后重新启用此功能)。

简而言之,没有通用的方法可以防止用户以适当的方式粘贴。

然而,你可以破解一个解决方案(总是我最喜欢的,因为似乎没有办法继续你真正想要的东西)。我要建议的这种方法取决于你运行了多少计时器。如果您有多个动画计时器,谷歌建议您尝试将它们全部折叠成一个计时单元,其他计时单元来自。如果是这种情况,请重构您的计时器。

实施全球计时器。实现一个基于该计时器运行25ms的功能。缓存textarea的内容。看看这些内容是否已经改变。

textarea的

<textarea id="maintextarea"></textarea>

脚本

/*init*/
var globalTimer = new Date();
var cachedText = document.getElementById("maintextarea").value;
var iterationCount = 0;

function cacheText() {
    cachedText = document.getElementById("maintextarea").value;
}

function upDateTimer() {
    globalTimer = new Date();
    var timerTimeout = setTimeout('upDateTimer()', 5);
    timeBasedOperations();
}
upDateTimer();

function timeBasedOperations() {
    iterationCount++;//this will allow timing to occur
    //TODO: Add in other timers calls based on global timer
    if (iterationCount % 5) {//every fifth iteration (hence 25ms)
        checkTextArea();
    }
}

function checkTextArea() {
    var currentText = document.getElementById("maintextarea").value;
    var textArea = document.getElementById("maintextarea");
    if (currentText.length > cachedText.length) {
        //TODO: Add additional logic for catching a paste or text change
        textArea.value = currentText.substr(0, 10);
    }
    cacheText();
}

我认为虽然这实现了计时器,但这是一个非常实用的解决方案。它也恰好工作(测试)。

:)

答案 1 :(得分:1)

简单地使用 <textarea maxlength="10"></textarea>​

这不需要javascript。它也会自动处理复制粘贴。

以下是更新后的jsFiddle

答案 2 :(得分:0)

您无法从浏览器中查看剪贴板缓冲区,因此您唯一的选择是将其限制为目前的10个字符。使用maxlength =“10”属性而不是你正在进行的javascript字符计数。

<textarea maxlength="10"></textarea>​