53

フォームを作っています。1 つのinputタグにはOnClickイベント ハンドラーがあり、ポップアップが開きます。ここで何かを選択すると、inputタグが自動入力されます。

その入力タグもreadonlyですので、正しいデータのみが入力されます。

inputタグのコードは次のとおりです。

<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();"  />

しかし、このrequired属性は Chrome では機能しません。ただし、フィールドは必須です。

どうすればそれを機能させることができるか知っている人はいますか？

4

13 に答える 13

109

私はあなたと同じ要件を持っていたので、これを行う簡単な方法を見つけました。"readonly" フィールドを "required" にしたい場合 (これは基本的な HTML ではサポートされていません)、カスタム検証を追加するのが面倒な場合は、次のように jQuery を使用してフィールドを読み取り専用にします。

改善された

コメントで提案を形成する

<input type="text" class="readonly" autocomplete="off" required />

<script>
    $(".readonly").on('keydown paste focus mousedown', function(e){
        if(e.keyCode != 9) // ignore tab
            e.preventDefault();
    });
</script>

クレジット: @Ed Bayiates、@Anton Shchyrov、@appel、@Edhrendal、@Peter Lenjo

オリジナル

<input type="text" class="readonly" required />

<script>
    $(".readonly").keydown(function(e){
        e.preventDefault();
    });
</script>
于 2014-09-05T22:18:01.053 に答える
34

readonlyrequired通常、フィールドにはすでに何らかの値が保持されていると想定されているため、フィールドに属性を指定することはできません。

于 2012-10-08T08:24:27.240 に答える
15

これは仕様によるものです。公式の HTML5 標準ドラフトによると、「readonly入力要素に属性が指定されている場合、その要素は制約の検証から除外されます」。(たとえば、その値はチェックされません。)

于 2012-10-08T08:28:26.780 に答える
1

これは役立つはずだと思います。

<form onSubmit="return checkIfInputHasVal()">
    <input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();"  />
</form>

<script>
     function checkIfInputHasVal(){
        if($("#formAfterRederict").val==""){
             alert("formAfterRederict should have a value");
             return false;
        }
     }
</script>
于 2013-01-13T17:42:19.227 に答える