Question

我正在努力想看看如何将一段javascript从突兀变为不引人注目的，任何人都可以解决这个问题吗？

这是脚本：

function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;          
    }

这是JSFiddle：http://jsfiddle.net/pxmmh/

Answer 1

不太难。你甚至不需要jQuery。

http://jsfiddle.net/pxmmh/4/

// your function you have now
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}

// bind event handlers to the DOM
var field = document.getElementById('limited');
field.onkeydown = function() {
    var counter = document.getElementById('limited-count');
    var limit = parseInt(field.dataset.limit, 10)
    limitText(field, counter, limit);
};

字段和计数器已被赋予id，允许我们找到它们。现在限制是data-* HTML5属性，我们可以使用JavaScript中的.dataset属性访问该属性，该属性允许元素说出它自己的限制是什么。

Answer 2

在这种情况下，它并不是非常突兀;如果JS关闭，没有任何重大意义被打破。但是，您要做的是将事件附加到onload中，并使用“你有X个字符”的段落，默认情况下隐藏或不存在。有相同的onload要么取消隐藏，要么添加它，因为它只有在JS运行时才有用。

Answer 3

如果你想要一个真正不引人注目的解决方案，一些jQuery将为你创造奇迹

$(document).ready(function () {

    $('#limitedtextfield').keyup(function () {
        limitText(this.form.limitedtextfield, this.form.countdown, 15);
    });

    $('#limitedtextfield').keydown(function () {
        limitText(this.form.limitedtextfield, this.form.countdown, 15);
    });

    function limitText(limitField, limitCount, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        } else {
            limitCount.value = limitNum - limitField.value.length;
        }
    }
});

请在此处查看JSFiddle http://jsfiddle.net/x65Kw/

将突兀的JavaScript转变为不引人注目的

3 个答案: