HTML模式匹配不工作

我有图案验证一个<input>元件。HTML模式匹配不工作

<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" style="text-transform:uppercase" required/>

如果用户输入全部大写字符，但是如果任何字符是小写字母，则模式匹配工作。为什么模式匹配不考虑style="text-transform:uppercase"？

来源

2017-09-12 Samkit Jain

检查，我想这是因为它适用变换前的模式。所以，你在做什么是毫无意义的。由于只能输入大写字母，因此不能将任何内容转换为大写字母。接受小写字母并转换它们，或只接受大写字母。 –

的text-transform仅为视觉变化，而不是一个数据变化。

请看下面的例子来调试<input>：

function debug() 
 
{ 
 
    let inpItem = document.getElementById('some'); 
 
    let inpValue = document.getElementById('some').value; 
 
    
 
    //alert the actual value on input. 
 
    console.log(inpValue); 
 
    
 
    //set text-transform to default. 
 
    inpItem.style='text-transform:none'; 
 
}

input { 
 
    text-transform:uppercase; 
 
}

<button onclick="debug()">Debug</button> 
 
<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" required/>

你怎么只能输入大写字母？

您可以使用JavaScript来的所有输入值设置为大写的值。

function debug() 
 
{ 
 
    let inpItem = document.getElementById('some'); 
 
    let inpValue = document.getElementById('some').value; 
 
    
 
    //alert the actual value on input. 
 
    console.log(inpValue); 
 
    
 
    //set text-transform to default. 
 
    inpItem.style='text-transform:none'; 
 
}

<button onclick="debug()">Debug</button> 
 
<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" onkeyup="javascript:this.value=this.value.toUpperCase();" required/>

来源

2017-09-12 08:42:28