2016-08-06 3 views
0

<input type="date"/>をアンカー内に入れたいのは、リスト項目をクリック可能にしたいからです。考えてみましょう:Chrome:アンカーの中で入力日付を使用すると狂気が発生する

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
</head> 
<body> 
<ul class="container list-group"> 
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a> 
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a> 
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a> 
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a> 
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a> 
</ul> 
</body> 

<script> 
    $('input').click(function(ev) { 
     //return false; 
     //ev.stopPropagation(); 
     ev.preventDefault(); 
    }); 
</script> 
</html> 

https://jsfiddle.net/qvatd8f1/

を私の問題は、アンカーに伝播するクリックを避けるために、つまり、私はイベントの伝播を停止する必要があります。しかし、少なくとも自分のChromium 51では、カレンダー(フィールドの右側)を示す入力日付の矢印が機能しなくなります。

(コードは、ブートストラップを使用しているが、それは関係ありません。問題は簡単にそれなしに複製することができます。)

提案を? :)

ところで、私はちょうど<input type="date"/>がクロム固有であることを最近気づいた。私たちはこの製品でこれを変更したいと考えています。しかし、現時点では、クライアントを表示するのはプロトタイプだけなので、これを回避する簡単な方法があれば、それは素晴らしいことです。あなたはデフォルトの動作を停止するので、私はクロームが日付セレクタを開いていないと思います

<li data-href="https://google.com">...</li> 

$(".container li").click(function() { 
    window.location.href = $(this).data("href") 
}) 
+0

::) – Moritur

答えて

0

が最も簡単な解決策のように思えることは、タグが、簡単なリチウムを使用して、JS経由でURLを変更しないことです。 stopPropagationは私のために働きます。 Nevermind - 選択した日付をクリックすると機能しません。
+0

Hmmm。非常にエレガントな回避策!私はそれを試して、そしてあなたに戻ってくるだろう。 :) –

関連する問題