Question

我在处理HTML <input> pattern属性时遇到问题。我想根据模式的实现来改变指标的颜色。在输入长度为3个字符之前它不会变为绿色，但是当它超过20个字符时它不会再变为红色。这是HTML代码：

<p>
    <canvas id="Circle6" width="30" height="30"></canvas>
    Imię
    <input type="text" pattern=".{3,20}" required title="3-20 characters required" id="FirstName" oninput="checkInput(id, name)" name="Circle6">
</p>

和Javascript函数：

    function checkInput(id, name) {
        var input = document.getElementById(id);
        isValid = input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0;
        var c = document.getElementById(name);
        var ctx = c.getContext("2d");
        if (isValid)
            ctx.fillStyle = "green";
        else ctx.fillStyle = "red";

        ctx.fill();
    }

行isValid = input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0;取自Javascript fallback for the HTML5 "pattern" attribute on <input>

编辑：在页面加载时绘制圆圈：

function drawCicle(elementid) {
    var c = document.getElementById(elementid);
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(15, 15, 10, 0, 2 * Math.PI);
    ctx.stroke();
}

Answer 1

您应该使用.test而不是.search，因为只要输入超过3个字符（换句话说，如果您的输入字符串超过20个字符，后者将返回匹配项，你仍然会得到一个返回的数组（将被评估为真））。

此外，您必须将正则表达式模式锚定到字符串的前^和结尾$，因此您只需将前者添加到前者并将后者附加到模式属性值：{{ 1}}。

new RegExp('^'+input.getAttribute('pattern')+'$')

请参阅此处的小提琴：http://jsfiddle.net/teddyrised/pmdye1y0/3/

Html <input pattern =“”/>使用JavaScript处理 - 失败超过

1 个答案: