CSSを使用して入力内の文字を検出する

Question

入力に二重引用符（ "）が含まれているかどうかを検出しようとしています：無効な場合、つまり文字が含まれている場合は、メッセージが表示されます。 注：入力値を動的に私の編集インターフェースに配置されます。

form div#intdblquote > input[type="text"]:valid { 
 
    display: none; 
 
    position: relative} 
 

 
form div#intdblquote > input[type="text"]:valid ~ .requirements { 
 
    display: none} 
 
    
 
form div#intdblquote > input[type="text"]:invalid { 
 
    display: block} 
 
    
 
form div#intdblquote > input[type="text"]:invalid ~ .requirements { 
 
    display: block}

<form> 
 
    <div id="intdblquote"> 
 
    <input type="text" id="intdblquote" name="intdblquote" pattern="[^'\x22]+" placeholder= " " value="MyEntry"" required /> 
 
    <div class="requirements">Must not contain double quote.</div> 
 
    </div> 
 
</form>

Answer 1

をたぶん私は右のそれを得ていないのですが、私はすべてが、ほぼオールライトですね。あなたはスタイルを台無しにして脱出した可能性があります。これは、と思われます働く："シンボルが入力されたときに警告が表示されます。 urのデフォルト値はMyEntry"で、属性は'で囲みます。

form div#intdblquote > input[type="text"]:valid ~ .requirements { 
 
    display: none; 
 
} 
 
    
 
form div#intdblquote > input[type="text"]:invalid ~ .requirements { 
 
    display: block; 
 
}

<form> 
 
    <div id="intdblquote"> 
 
    <input type="text" id="intdblquote" name="intdblquote" pattern="[^\x22]+" placeholder="" value='MyEntry"' required/> 
 
    <div class="requirements">Required. Must not contain double quote.</div> 
 
    </div> 
 
</form>

pattern属性は、要素の値を照らしてチェックされていることを正規表現を指定します。正規表現が満たされないと、:invalid疑似クラスが引き継ぎます。さもなければ、:validが場に出る。

また、requiredが存在するため、:invalid疑似クラスが入力されても何も入力されない場合、注意が必要です。