删除自动完成输入字段

Question

我有一个表单，通过在我的字段中插入输入，我重新制作了引导日期选择器，一切正常。 唯一的问题是浏览器中使用的自动完成功能，当您单击该字段时，会出现已经输入的值，对于谁来说我不清楚我的意思

也许我可以以某种方式更改输入类型，以便不存在此自动完成功能？ 或者我该如何解决这个问题？ 重要的是，同时表单中的日期选择仍然有效

 // Initialize datepicker const dp = $("#month").datepicker({ todayHighlight: true }); // Show datepicker on <input> click $('.input-wrapper > input').on('click', (e) => dp.datepicker("show")); // On date change const y = document.getElementById('year'); const m = document.getElementById('month'); const d = document.getElementById('day'); dp.on('changeDate',function(ev){ const date = dp.datepicker('getDate'); y.value = date.getFullYear(); d.value = date.getDate(); dp.datepicker('hide'); m.value = date.getMonth() + 1; }) dp.on('hide',function(ev){ const date = dp.datepicker('getDate'); m.value = date.getMonth() + 1; })

 label { color: #808694; font-family: Montserrat; font-size: 10px; font-weight: bold; letter-spacing: 0; line-height: 16px; text-transform: uppercase; } input { margin-right: 20px; box-sizing: border-box; outline: none; border: none; background-color: #F4F5F8; width: 50px; }.span-wrapper { display: flex; align-items: flex-end; } span { color: #808694; font-family: Montserrat; font-size: 8px; font-weight: bold; letter-spacing: 0; line-height: 16px; text-transform: uppercase; text-align: center; width: 50px; }.main-content { min-height: 10vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <div class="main-content"> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> </div> <div class="contacts-call-form"> <form class="js-form" action="{{ route('send-comment') }}"> <div class="col-md-6"> <div class="call-form-item"> <label for="name">Name *</label> <div class="input-wrapper"> <input class="js-form-call-name" id="name" type="text" name="name"> </div> </div> </div> <div class="col-md-6"> <div class="call-form-item"> <label for="email">Email *</label> <div class="input-wrapper"> <input class="js-form-call-email" id="email" type="email" name="email"> </div> </div> </div> <div class="col-md-6"> <div class="call-form-item-date"> <label for="date">Select a date *</label> <div class="input-wrapper"> <input class="js-form-month" id="month" type="text" name="month"> <input class="js-form-day" id="day" type="text" name="day"> <input class="js-form-year" id="year" type="text" name="year"> <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none"> <input class="form-control" type="text" readonly /> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> <div class="span-wrapper"> <span for="month">Month</span> <span for="day">Day</span> <span for="year">Year</span> </div> </div> </div> </form> </div>

Answer 1

您必须在表单标签上将autocomplete设置为off ：

<form class="js-form" action="{{ route('send-comment') }}" autocomplete="off">

或仅在您的特定输入字段上。

请参阅： https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Answer 2

您必须为每个输入指定自动完成关闭输入，例如

<input autocomplete="off" name="myinputname... >

更多信息在这里： https://www.w3schools.com/tags/att_input_autocomplete.asp