使用带有 datalist 的输入作为选择 - 如果已经选择了一个值，我如何打开一个完整的值列表？

Question

当我将<input>与<datalist> > 一起使用时，在选择一个值后，我尝试打开一个完整的值列表，只打开一个值的列表。 同时列表可以包含许多值，以使用滚动搜索所需的值。 有必要输入前几个字符以找到所需的值。 另一方面，如果用户不小心选择了错误的值，下拉列表中的单个选项可能会造成混淆。

 <input id="input" list="datalist" /> <datalist id="datalist"> <option>&nbsp;</option> <option>Afghanistan</option> <option>Albania</option> <option>Algeria</option> <option>Andorra</option> <option>Angola</option> <option>Antigua and Barbuda</option> <option>Argentina</option> <option>Armenia</option> <option>Australia</option> <option>Austria</option> <option>Azerbaijan</option> <option>Bahamas</option> <option>Bahrain</option> <option>Bangladesh</option> <option>Barbados</option> <option>Belarus</option> <option>Belgium</option> <option>Belize</option> <option>Benin</option> <option>Bhutan</option> <option>Bolivia</option> <option>Bosnia and Herzegovina</option> <option>Botswana</option> <option>Brazil</option> <option>Brunei </option> <option>Bulgaria</option> <option>Burkina Faso</option> <option>Burundi</option> <option>Côte d'Ivoire</option> <option>Cabo Verde</option> <option>Cambodia</option> <option>Cameroon</option> <option>Canada</option> <option>Central African Republic</option> <option>Chad</option> <option>Chile</option> <option>China</option> <option>Colombia</option> <option>Comoros</option> <option>Congo (Congo-Brazzaville)</option> <option>Costa Rica</option> <option>Croatia</option> <option>Cuba</option> <option>Cyprus</option> <option>Czechia (Czech Republic)</option> <option>Democratic Republic of the Congo</option> <option>Denmark</option> <option>Djibouti</option> <option>Dominica</option> <option>Dominican Republic</option> <option>Ecuador</option> <option>Egypt</option> <option>El Salvador</option> <option>Equatorial Guinea</option> <option>Eritrea</option> <option>Estonia</option> <option>Eswatini (fmr. "Swaziland")</option> <option>Ethiopia</option> <option>Fiji</option> <option>Finland</option> <option>France</option> <option>Gabon</option> <option>Gambia</option> <option>Georgia</option> <option>Germany</option> <option>Ghana</option> <option>Greece</option> <option>Grenada</option> <option>Guatemala</option> <option>Guinea</option> <option>Guinea-Bissau</option> <option>Guyana</option> <option>Haiti</option> <option>Holy See</option> <option>Honduras</option> <option>Hungary</option> <option>Iceland</option> <option>India</option> <option>Indonesia</option> <option>Iran</option> <option>Iraq</option> <option>Ireland</option> <option>Israel</option> <option>Italy</option> <option>Jamaica</option> <option>Japan</option> <option>Jordan</option> <option>Kazakhstan</option> <option>Kenya</option> <option>Kiribati</option> <option>Kuwait</option> <option>Kyrgyzstan</option> <option>Laos</option> <option>Latvia</option> <option>Lebanon</option> <option>Lesotho</option> <option>Liberia</option> <option>Libya</option> <option>Liechtenstein</option> <option>Lithuania</option> <option>Luxembourg</option> <option>Madagascar</option> <option>Malawi</option> <option>Malaysia</option> <option>Maldives</option> <option>Mali</option> <option>Malta</option> <option>Marshall Islands</option> <option>Mauritania</option> <option>Mauritius</option> <option>Mexico</option> <option>Micronesia</option> <option>Moldova</option> <option>Monaco</option> <option>Mongolia</option> <option>Montenegro</option> <option>Morocco</option> <option>Mozambique</option> <option>Myanmar (formerly Burma)</option> <option>Namibia</option> <option>Nauru</option> <option>Nepal</option> <option>Netherlands</option> <option>New Zealand</option> <option>Nicaragua</option> <option>Niger</option> <option>Nigeria</option> <option>North Korea</option> <option>North Macedonia</option> <option>Norway</option> <option>Oman</option> <option>Pakistan</option> <option>Palau</option> <option>Palestine State</option> <option>Panama</option> <option>Papua New Guinea</option> <option>Paraguay</option> <option>Peru</option> <option>Philippines</option> <option>Poland</option> <option>Portugal</option> <option>Qatar</option> <option>Romania</option> <option>Russia</option> <option>Rwanda</option> <option>Saint Kitts and Nevis</option> <option>Saint Lucia</option> <option>Saint Vincent and the Grenadines</option> <option>Samoa</option> <option>San Marino</option> <option>Sao Tome and Principe</option> <option>Saudi Arabia</option> <option>Senegal</option> <option>Serbia</option> <option>Seychelles</option> <option>Sierra Leone</option> <option>Singapore</option> <option>Slovakia</option> <option>Slovenia</option> <option>Solomon Islands</option> <option>Somalia</option> <option>South Africa</option> <option>South Korea</option> <option>South Sudan</option> <option>Spain</option> <option>Sri Lanka</option> <option>Sudan</option> <option>Suriname</option> <option>Sweden</option> <option>Switzerland</option> <option>Syria</option> <option>Tajikistan</option> <option>Tanzania</option> <option>Thailand</option> <option>Timor-Leste</option> <option>Togo</option> <option>Tonga</option> <option>Trinidad and Tobago</option> <option>Tunisia</option> <option>Turkey</option> <option>Turkmenistan</option> <option>Tuvalu</option> <option>Uganda</option> <option>Ukraine</option> <option>United Arab Emirates</option> <option>United Kingdom</option> <option>United States of America</option> <option>Uruguay</option> <option>Uzbekistan</option> <option>Vanuatu</option> <option>Venezuela</option> <option>Vietnam</option> <option>Yemen</option> <option>Zambia</option> <option>Zimbabwe</option> </datalist>

有没有可以解决这个问题的hack？

Answer 1

这是一个糟糕的解决方案，但它确实有效。

 input.onmousedown = event => { // if value is not empty if (input.value) { // cancel event procedure event.preventDefault(); // hold current placeholder input._placeholder = input.placeholder; // set placeholder to the value input.placeholder = input.value; // clear current value input.value = ''; // add flip-flag class input.classList.add('flip-value-placeholder'); // refocus input.blur(); input.focus(); } }; input.onkeydown = () => { // if input has flip-flag class if (input.classList.contains('flip-value-placeholder')) { // remove class input.classList.remove('flip-value-placeholder'); // rollback the value input.value = input.placeholder; // rollback placeholder input.placeholder = input._placeholder; } } form.onsubmit = event => { // find all inputs with list by selector form.querySelectorAll('input[list]') // just to be sure, do a flip reset .forEach(input=>input.onkeydown()); // get form data const data = new FormData(form); // alert data alert(JSON.stringify([...data.entries()])); // cancel event procedure event.preventDefault(); event.stopPropagation(); }

 /* recolor placeholder */ input.flip-value-placeholder::placeholder { color: currentcolor; } /* remove the caret */ input.flip-value-placeholder { caret-color: transparent; }

 <form id="form"> <input name="country" placeholder="Country" id="input" list="datalist" /> <datalist id="datalist"> <option>&nbsp;</option> <option>Afghanistan</option> <option>Albania</option> <option>Algeria</option> <option>Andorra</option> <option>Angola</option> <option>Antigua and Barbuda</option> <option>Argentina</option> <option>Armenia</option> <option>Australia</option> <option>Austria</option> <option>Azerbaijan</option> <option>Bahamas</option> <option>Bahrain</option> <option>Bangladesh</option> <option>Barbados</option> <option>Belarus</option> <option>Belgium</option> <option>Belize</option> <option>Benin</option> <option>Bhutan</option> <option>Bolivia</option> <option>Bosnia and Herzegovina</option> <option>Botswana</option> <option>Brazil</option> <option>Brunei </option> <option>Bulgaria</option> <option>Burkina Faso</option> <option>Burundi</option> <option>Côte d'Ivoire</option> <option>Cabo Verde</option> <option>Cambodia</option> <option>Cameroon</option> <option>Canada</option> <option>Central African Republic</option> <option>Chad</option> <option>Chile</option> <option>China</option> <option>Colombia</option> <option>Comoros</option> <option>Congo (Congo-Brazzaville)</option> <option>Costa Rica</option> <option>Croatia</option> <option>Cuba</option> <option>Cyprus</option> <option>Czechia (Czech Republic)</option> <option>Democratic Republic of the Congo</option> <option>Denmark</option> <option>Djibouti</option> <option>Dominica</option> <option>Dominican Republic</option> <option>Ecuador</option> <option>Egypt</option> <option>El Salvador</option> <option>Equatorial Guinea</option> <option>Eritrea</option> <option>Estonia</option> <option>Eswatini (fmr. "Swaziland")</option> <option>Ethiopia</option> <option>Fiji</option> <option>Finland</option> <option>France</option> <option>Gabon</option> <option>Gambia</option> <option>Georgia</option> <option>Germany</option> <option>Ghana</option> <option>Greece</option> <option>Grenada</option> <option>Guatemala</option> <option>Guinea</option> <option>Guinea-Bissau</option> <option>Guyana</option> <option>Haiti</option> <option>Holy See</option> <option>Honduras</option> <option>Hungary</option> <option>Iceland</option> <option>India</option> <option>Indonesia</option> <option>Iran</option> <option>Iraq</option> <option>Ireland</option> <option>Israel</option> <option>Italy</option> <option>Jamaica</option> <option>Japan</option> <option>Jordan</option> <option>Kazakhstan</option> <option>Kenya</option> <option>Kiribati</option> <option>Kuwait</option> <option>Kyrgyzstan</option> <option>Laos</option> <option>Latvia</option> <option>Lebanon</option> <option>Lesotho</option> <option>Liberia</option> <option>Libya</option> <option>Liechtenstein</option> <option>Lithuania</option> <option>Luxembourg</option> <option>Madagascar</option> <option>Malawi</option> <option>Malaysia</option> <option>Maldives</option> <option>Mali</option> <option>Malta</option> <option>Marshall Islands</option> <option>Mauritania</option> <option>Mauritius</option> <option>Mexico</option> <option>Micronesia</option> <option>Moldova</option> <option>Monaco</option> <option>Mongolia</option> <option>Montenegro</option> <option>Morocco</option> <option>Mozambique</option> <option>Myanmar (formerly Burma)</option> <option>Namibia</option> <option>Nauru</option> <option>Nepal</option> <option>Netherlands</option> <option>New Zealand</option> <option>Nicaragua</option> <option>Niger</option> <option>Nigeria</option> <option>North Korea</option> <option>North Macedonia</option> <option>Norway</option> <option>Oman</option> <option>Pakistan</option> <option>Palau</option> <option>Palestine State</option> <option>Panama</option> <option>Papua New Guinea</option> <option>Paraguay</option> <option>Peru</option> <option>Philippines</option> <option>Poland</option> <option>Portugal</option> <option>Qatar</option> <option>Romania</option> <option>Russia</option> <option>Rwanda</option> <option>Saint Kitts and Nevis</option> <option>Saint Lucia</option> <option>Saint Vincent and the Grenadines</option> <option>Samoa</option> <option>San Marino</option> <option>Sao Tome and Principe</option> <option>Saudi Arabia</option> <option>Senegal</option> <option>Serbia</option> <option>Seychelles</option> <option>Sierra Leone</option> <option>Singapore</option> <option>Slovakia</option> <option>Slovenia</option> <option>Solomon Islands</option> <option>Somalia</option> <option>South Africa</option> <option>South Korea</option> <option>South Sudan</option> <option>Spain</option> <option>Sri Lanka</option> <option>Sudan</option> <option>Suriname</option> <option>Sweden</option> <option>Switzerland</option> <option>Syria</option> <option>Tajikistan</option> <option>Tanzania</option> <option>Thailand</option> <option>Timor-Leste</option> <option>Togo</option> <option>Tonga</option> <option>Trinidad and Tobago</option> <option>Tunisia</option> <option>Turkey</option> <option>Turkmenistan</option> <option>Tuvalu</option> <option>Uganda</option> <option>Ukraine</option> <option>United Arab Emirates</option> <option>United Kingdom</option> <option>United States of America</option> <option>Uruguay</option> <option>Uzbekistan</option> <option>Vanuatu</option> <option>Venezuela</option> <option>Vietnam</option> <option>Yemen</option> <option>Zambia</option> <option>Zimbabwe</option> </datalist> <button id="button" type="submit">Submit</button> </form>