我在处理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();
}
行CCD_ 3取自HTML5"的Javascript回退;图案";<输入>
编辑:圆圈由在页面加载时绘制
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();
}
您应该使用.test
而不是.search
,因为只要您的输入超过3个字符,后者就会返回匹配项(换句话说,如果您的输入字符串超过20个字符,您仍然会返回一个数组(计算结果为true)。
此外,您必须将regex模式锚定到字符串的前^
和后$
,因此只需将前者前置,并将后者附加到模式属性值:new RegExp('^'+input.getAttribute('pattern')+'$')
。
function checkInput(id, name) {
var input = document.getElementById(id),
re = new RegExp('^'+input.getAttribute('pattern')+'$'),
c = document.getElementById(name),
ctx = c.getContext("2d");
if (re.test(input.value))
ctx.fillStyle = "green";
else ctx.fillStyle = "red";
ctx.fill();
}
请在此处查看小提琴:http://jsfiddle.net/teddyrised/pmdye1y0/3/