6

クロムでは、次のようなタグ

<input id="picker" type="date">

テキストフィールドとして表示されます。ただし、次のようなものでその値を取得しようとして呼び出します

$("#picker").val()

有効な日付が入力されるか、ドロップダウンから選択されるまで、何も返しません。キーを押すと、オブジェクトのすべての即時プロパティを調べました

$("#picker").keypress(function() {
    var output = ""
    for (var i in this) {       
        output += i +" value:"+ this[i] + "\n";
    }
    alert(output);
});​

しかし、これらのいずれにも私の入力が表示されませんでした。http://jsfiddle.net/5cN2q/で自分で確認してください

私の質問は: 入力が有効な日付でない場合、クロムで入力[type="date"] からテキストを取得することは可能ですか?

4

2 に答える 2

4

元の値が表示されない他の回答として、ただし、次の方法で検証を処理できますValidityState

<script type="text/javascript">
function submitform()
{
  var inputdate = document.getElementById("inputdate")
  // check if date is valid.
  // you can use `inputdate.validity.valid` too.
  if(inputdate.validity.badInput) {
    // error message from the browser
    document.getElementById("message").innerHTML = inputdate.validationMessage
  }
  //document.myform.submit();
}
</script>

<div>message: </div><div id="message" style="color: red; font-weight:bold;"></div>
<form method=post action="./post">
  <input type="date" id="inputdate" value="2016-02-29">
  <a href="javascript: submitform()">get date!</a>
</form>

日を 30 に変更してリンクをクリックすると、エラー メッセージが表示されます。

楽しめ。

于 2014-06-06T12:01:56.403 に答える
4

W3C Date State 仕様では、サニタイズ アルゴリズムが次のように定義されています。

  • 値のサニタイズ アルゴリズムは次のとおりです。要素の値が有効な日付文字列でない場合は、代わりに空の文字列に設定します。

DOM input value specで定義されているように、input 要素の値を設定するたびに呼び出されます。

  • 取得時に、要素の現在の値を返す必要があります。設定時に、要素の値を新しい値に設定し、要素のダーティ値フラグを true に設定し、値サニタイズ アルゴリズムを呼び出す必要があります(要素の type 属性の現在の状態で定義されている場合)。次に、要素にテキスト エントリ カーソルがある場合テキスト入力カーソルの位置をテキスト フィールドの末尾に移動し、選択したテキストを選択解除し、選択方向を [なし] にリセットします。

そのためvalue、日付が無効な場合、プロパティは常に空の文字列になります。結局のところ、テキスト入力ではないため、「オリジナル/ダーティ/ユーザー入力テキスト値」のプロパティは指定されていないようです。

IMO は良いことです。無効な日付が偽の値 (空の文字列) として扱われるため、フォームの検証が容易になります。また、ブラウザーは日付入力用の UI をより自由に実装できます。

W3C 以外の日付入力を希望する場合は、古き良き JS 日付検証とjQuery UI の datepickerなどの日付ピッカーを使用したテキスト入力を使用できます。これにより、入力の実際のテキスト値を取得できるようになり、さらにクロスブラウザー ソリューションにもなります。

于 2012-11-07T21:08:17.293 に答える