web-dev-qa-db-ja.com

HTMLはフォームでの読み取り専用入力を必要としました

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

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

これはinputタグのコードです：

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

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

誰かが私がそれを機能させる方法を知っていますか？

formshtml5google-chromereadonlyrequired-field
32
Mathlight

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

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

<script>
    $(".readonly").keydown(function(e){
        e.preventDefault();
    });
</script>

[〜＃〜] edit [〜＃〜]

@Ed Bayiatesがコメントで指摘したように、次のようにpreventDefaultに貼り付けハンドラを追加することもできます。

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

<script>
    $(".readonly").on('keydown paste', function(e){
        e.preventDefault();
    });
</script>
84
Kanak Singhal

readonlyフィールドにはrequired属性を含めることはできません。これは一般に、すでに何らかの値を保持していると想定されているためです。

31
BenM

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

12
user2428118

readonlyを削除して関数を使用

<input type="text" name="name" id="id" required onkeypress="return false;" />

あなたが望むように動作します。

10
Parth Patel

はい、この問題の回避策があります。 https://codepen.io/fxm90/pen/zGogwV サイトから見つけました。

解決策は次のとおりです。

HTMLファイル

<form>
  <input type="text" value="" required data-readonly />
  <input type="submit" value="Submit" />
</form>

CSSファイル

input[data-readonly] {
  pointer-events: none;
}
5
Udara Seneviratne

誰かがhtmlからのみそれをしたい場合、これは私のために機能します。

<input type="text" onkeydown="event.preventDefault()" required />
2
Shabbir

Requiredとreadonlyは連動しません。

ただし、読み取り専用は次の構成に置き換えることができます。

     <input     type="text"
                onkeydown="return false;"
                style="caret-color: transparent !important;"                   
                required>

1）onkeydownはデータの操作を停止します

2）style="caret-color: transparent !important;"はカーソルを非表示にします。

3）入力にイベントがない場合はstyle="pointer-events: none;"を追加できますが、Month Pickerを使用したため、私の場合はそうではありませんでした。私のMonth pickerはクリックするとダイアログを表示します。

1
Yevgeniy Afanasyev

回答@KanakSinghalに基づきますが、すべてのキーをブロックせず、cutイベントをブロックします

$('.readonly').keydown(function(e) {
  if (e.keyCode === 8 || e.keyCode === 46)  // Backspace & del
    e.preventDefault();
}).on('keypress paste cut', function(e) {
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="readonly" value="test" />

追伸誰かがcutイベントがcopyイベントに変換されることを知っていますか？

1
Anton Shchyrov

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

<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>
1
scireon

テンプレートに対してこれを行うことができます。

<input required onfocus="unselect($event)" class="disabled">

そして、これはあなたのjsのために：

unselect(event){
    event.preventDefault();
    event.currentTarget.blur();
}

ユーザーに対しては、無効化された入力用のcss-classがあれば、入力は無効化され、同時に必要になります。

1
Alex Link

必須と読み取り専用は連動しません。

ただし次のように2つの入力を行うことができます。

<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible

そして、値Twoを入力One内の値に変更します。

0
Deadpool