HTML 5 Input type='date' 禁用鍵盤輸入

Question

我正在開發 Chrome 打包應用程序，因此我的代碼只能在 Chrome 中運行。

我有以下輸入

<input type="date" />

https://jsfiddle.net/jhbo4q2k/

在 Chrome 上，這會自動添加一個 DatePicker。 我只想保留此 Datepicker 並禁用鍵盤輸入。

這可能嗎？

編輯：

接受的答案有效。 請注意這一點

https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts

您不能在打包的應用程序中使用內聯腳本。

Answer 1

您可以使用onkeydown並阻止用戶輸入該值。

 <input type="date" onkeydown="return false" />

Answer 2

對於 ReactJS 以上解決方案不起作用

我必須做：

<input type="date" onKeyDown={(e) => e.preventDefault()} .... />

Answer 3

嗨，您可以使用 onfocus="blur()" 來防止鍵盤彈出。 因為當元素獲得焦點時，我們將移除它的焦點（本地鍵盤不會顯示）但是通過 onclick 我們可以繼續我們的操作。

 <input type="date" class="form-control"  onfocus="blur()" onclick="dosomework()" name="some-name" id="some-id" >
<script>

function dosomework(){
 alert('hi');
 }

<script>

Answer 4

啟用和禁用輸入日期的簡單方法：

步驟 1：創建輸入日期。

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

第 2 步：創建啟用和禁用按鈕

 <button onclick="disableBtn()">Disable Date Field</button> <button onclick="undisableBtn()">Undisable Date Field</button>

第 3 步：用於啟用和禁用的 Javascript

 <script> function disableBtn() { document.getElementById("dateEnd").disabled = true; } function undisableBtn() { document.getElementById("dateEnd").disabled = false; } </script>

希望，這可以幫助你。

Answer 5

用這個 ：

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

與jquery：

  $("#date_input").on("keydown", function(e) {
     e.preventDefault();
   });

Answer 6

如果使用 Django 表單；

datetime = forms.DateTimeField(widget=forms.DateTimeInput(attrs={
            'onkeydown': 'return false' # If you want to disable the keyboard
            "onfocus": 'blur()' # If you also want to disable virtual keyboard(on smartphones).
        }))

或者

document.getElementById('id_datetime').onkeydown = (e) => {
    e.preventDefault();
}
document.getElementById('id_datetime').setAttribute('onfocus', 'blur()');

Django 只是在輸入字段名稱前添加“id”並將其設置為它的 id。 這里的輸入字段名稱是datetime ，因此 id 將是id_datetime 。

Answer 7

e.preventDefault() 將完成這項工作......

 const inputDate = document.querySelector("input"); inputDate.addEventListener("keydown", function (e) { e.preventDefault(); });

 <input type="date">

Answer 8

禁用鍵盤輸入是一種很好的方法，它可以讓殘障人士更難訪問您的應用程序，並降低它的用戶友好性，在我看來，鍵盤輸入比日期選擇器更容易使用，尤其是在預期格式明確的情況下。 你最好做一些基本的字段驗證，以確保輸入在提交之前是合理的，默認情況下，HTML 日期字段在 Chrome Firefox 和 Edge 上已經有強大的驗證。