We have a dropdown(html select) which contains number from 00 to 59 (possible value for minutes). When control is on focus and user input 13 (or 24 or 59 etc) using key board, it selects the number 13 (or 24 or 59 etc) in the control. Which is expected behavior.
But when user input number like 44 it selects 40 then 41. Same is the issue with 22,33,55.
This is the behavior with Firefox, Chrome, Safari. Interestingly in IE9 it is working fine(you input 44 it selects 44)
Please suggest how to make the behavior of "html select" uniform in all the browser. Preferably the way it is working in IE9, which seems correct.
Example code:
<html>
<body>
Select Minutes:
<select id="hr_sel_min">
<option title="00" value="00" selected="selected">00</option>
<option title="01" value="01">01</option>
<option title="02" value="02">02</option>
<option title="03" value="03">03</option>
<option title="04" value="04">04</option>
<option title="05" value="05">05</option>
<option title="06" value="06">06</option>
<option title="07" value="07">07</option>
<option title="08" value="08">08</option>
<option title="09" value="09">09</option>
<option title="10" value="10">10</option>
<option title="11" value="11">11</option>
<option title="12" value="12">12</option>
<option title="13" value="13">13</option>
<option title="14" value="14">14</option>
<option title="15" value="15">15</option>
<option title="16" value="16">16</option>
<option title="17" value="17">17</option>
<option title="18" value="18">18</option>
<option title="19" value="19">19</option>
<option title="20" value="20">20</option>
<option title="21" value="21">21</option>
<option title="22" value="22">22</option>
<option title="23" value="23">23</option>
<option title="24" value="24">24</option>
<option title="25" value="25">25</option>
<option title="26" value="26">26</option>
<option title="27" value="27">27</option>
<option title="28" value="28">28</option>
<option title="29" value="29">29</option>
<option title="30" value="30">30</option>
<option title="31" value="31">31</option>
<option title="32" value="32">32</option>
<option title="33" value="33">33</option>
<option title="34" value="34">34</option>
<option title="35" value="35">35</option>
<option title="36" value="36">36</option>
<option title="37" value="37">37</option>
<option title="38" value="38">38</option>
<option title="39" value="39">39</option>
<option title="40" value="40">40</option>
<option title="41" value="41">41</option>
<option title="42" value="42">42</option>
<option title="43" value="43">43</option>
<option title="44" value="44">44</option>
<option title="45" value="45">45</option>
<option title="46" value="46">46</option>
<option title="47" value="47">47</option>
<option title="48" value="48">48</option>
<option title="49" value="49">49</option>
<option title="50" value="50">50</option>
<option title="51" value="51">51</option>
<option title="52" value="52">52</option>
<option title="53" value="53">53</option>
<option title="54" value="54">54</option>
<option title="55" value="55">55</option>
<option title="56" value="56">56</option>
<option title="57" value="57">57</option>
<option title="58" value="58">58</option>
<option title="59" value="59">59</option>
</select> minutes
</body>
</html>
Please find the example code in jsFiddle: http://jsfiddle.net/2QTvJ/
(open the example in IE9 and chrome to see the difference.)
As Raheel was saying, it goes up to the next value starting with the character that you hit, 4 or 5, for example. You could have a text box input that then changes the drop down value or some other type of form element that would distinguish the value.
Another way would be to distinguish value with jquery keypress function.
http://api.jquery.com/keypress/
Related
This is not a technical question.
I just can't find what i am really looking for : a premade list of all spoken languages (Preferably in french).
Kinda like this : http://snipplr.com/view/4794/50-most-common-languages-spoken-in-the-united-states--drop-down-list-for-an-online-form/
But the one above is incomplete and it's in english :/
Maybe one of you knows where i could find something like this. It would be terribly long to do and my guess is that this was already made at least a thousand times. (Any distro, any international websites...)
I have tried googling it but i get no accurate results. (it's a little pointy)
I am sorry if this is out of context or shouldn't be asked here. If that is the case, feel free to do what you must.
Many thanks!
Here is the site with what you (I am sure- not you alone) were looking for:
http://www.freeformatter.com/iso-country-list-html-select.html
and this is the list of languages "borrowed "from Google Translate:
<select>
<option value=af>Afrikaans</option>
<option value=sq>Albanian</option>
<option value=am>Amharic</option>
<option value=ar>Arabic</option>
<option value=hy>Armenian</option>
<option value=az>Azerbaijani</option>
<option value=eu>Basque</option>
<option value=be>Belarusian</option>
<option value=bn>Bengali</option>
<option value=bs>Bosnian</option>
<option value=bg>Bulgarian</option>
<option value=ca>Catalan</option>
<option value=ceb>Cebuano</option>
<option value=ny>Chichewa</option>
<option value=zh-CN>Chinese</option>
<option value=co>Corsican</option>
<option value=hr>Croatian</option>
<option value=cs>Czech</option>
<option value=da>Danish</option>
<option value=nl>Dutch</option>
<option value=en>English</option>
<option value=eo>Esperanto</option>
<option value=et>Estonian</option>
<option value=tl>Filipino</option>
<option value=fi>Finnish</option>
<option value=fr>French</option>
<option value=fy>Frisian</option>
<option value=gl>Galician</option>
<option value=ka>Georgian</option>
<option value=de>German</option>
<option value=el>Greek</option>
<option value=gu>Gujarati</option>
<option value=ht>Haitian Creole</option>
<option value=ha>Hausa</option>
<option value=haw>Hawaiian</option>
<option value=iw>Hebrew</option>
<option value=hi>Hindi</option>
<option value=hmn>Hmong</option>
<option value=hu>Hungarian</option>
<option value=is>Icelandic</option>
<option value=ig>Igbo</option>
<option value=id>Indonesian</option>
<option value=ga>Irish</option>
<option value=it>Italian</option>
<option value=ja>Japanese</option>
<option value=jw>Javanese</option>
<option value=kn>Kannada</option>
<option value=kk>Kazakh</option>
<option value=km>Khmer</option>
<option value=ko>Korean</option>
<option value=ku>Kurdish (Kurmanji)</option>
<option value=ky>Kyrgyz</option>
<option value=lo>Lao</option>
<option value=la>Latin</option>
<option value=lv>Latvian</option>
<option value=lt>Lithuanian</option>
<option value=lb>Luxembourgish</option>
<option value=mk>Macedonian</option>
<option value=mg>Malagasy</option>
<option value=ms>Malay</option>
<option value=ml>Malayalam</option>
<option value=mt>Maltese</option>
<option value=mi>Maori</option>
<option value=mr>Marathi</option>
<option value=mn>Mongolian</option>
<option value=my>Myanmar (Burmese)</option>
<option value=ne>Nepali</option>
<option value=no>Norwegian</option>
<option value=ps>Pashto</option>
<option value=fa>Persian</option>
<option value=pl>Polish</option>
<option value=pt>Portuguese</option>
<option value=pa>Punjabi</option>
<option value=ro>Romanian</option>
<option value=ru>Russian</option>
<option value=sm>Samoan</option>
<option value=gd>Scots Gaelic</option>
<option value=sr>Serbian</option>
<option value=st>Sesotho</option>
<option value=sn>Shona</option>
<option value=sd>Sindhi</option>
<option value=si>Sinhala</option>
<option value=sk>Slovak</option>
<option value=sl>Slovenian</option>
<option value=so>Somali</option>
<option value=es>Spanish</option>
<option value=su>Sundanese</option>
<option value=sw>Swahili</option>
<option value=sv>Swedish</option>
<option value=tg>Tajik</option>
<option value=ta>Tamil</option>
<option value=te>Telugu</option>
<option value=th>Thai</option>
<option value=tr>Turkish</option>
<option value=uk>Ukrainian</option>
<option value=ur>Urdu</option>
<option value=uz>Uzbek</option>
<option value=vi>Vietnamese</option>
<option value=cy>Welsh</option>
<option value=xh>Xhosa</option>
<option value=yi>Yiddish</option>
<option value=yo>Yoruba</option>
<option value=zu>Zulu</option>
</select>
Not sure where this question DOES belong but the best resource I can find actually : ISO 639.2
Codes arranged alphabetically by alpha-3/ISO 639-2 Code
Contains the French translation for all Languages provided.
Im not sure you will get a more concise list.
Is it possible to not show the first option as selected in a <select>, without adding a blank option?
<select id="location" name="location" class="form-control">
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Mexico">Mexico</option>
<option value="Russia">Russia</option>
<option value="Spain">Spain</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
Thanks
Steve
No.
Typically you might add something like:
<option value="0">Please select a country</option>
Then in your JS check if it's got a value of 0 before form submit.
I believe it's possible as described in here: w3schools
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
Example: Link
My HTML:
<select id="start_time">
<option value="00:00">0:00</option>
<option value="00:30">0:30</option>
<option value="01:00">1:00</option>
<option value="01:30">1:30</option>
<option value="02:00">2:00</option>
<option value="02:30">2:30</option>
<option value="03:00">3:00</option>
<option value="03:30">3:30</option>
<option value="04:00">4:00</option>
<option value="04:30">4:30</option>
<option value="05:00">5:00</option>
<option value="05:30">5:30</option>
<option value="06:00">6:00</option>
<option value="06:30">6:30</option>
<option value="07:00">7:00</option>
<option value="07:30">7:30</option>
<option value="08:00">8:00</option>
<option value="08:30">8:30</option>
<option value="09:00">9:00</option>
<option value="09:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
JS Fiddle.
When you run this, if the user opens the dropdown box the cursor doesn't turn blue in the last box.
Is this a Chrome bug? Or is there a change I needed to correct it?
Yes, it is a Chrome 32 bug. The issue in Chromium bugtracker.
It's a chrome bug ;-), i was brainfarting about it too :p!
I have a situation where I'm using an HTML Datalist and text input for users to select or type in a state, where there are a long list of options. Firefox and Chrome will enable a scrollbar to be able to select options further down the list that aren't initially visible. In Chrome this ability is enabled when you use the autocomplete="off" attribute. IE 10 unfortunately doesn't show a scrollbar in any case that I'm aware of, so the user can't see or select what is initially visible, even if they attempt to key down to the bottom of the list.
Does anyone know of a solution to get IE 10 to show a scrollbar on a very long datalist?
You can see my example on JSFiddle:
http://jsfiddle.net/amGY9/15/
<datalist id="states_list">
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="56">American Samoa</option>
<option value="2">Arizona</option>
<option value="3">Arkansas</option>
<option value="62">Army Europe (PO)</option>
<option value="4">California</option>
<option value="54">Canal Zone</option>
<option value="5">Colorado</option>
<option value="6">Connecticut</option>
<option value="7">Delaware</option>
<option value="8">District of Columbia</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
<option value="52">Guam</option>
<option value="11">Hawaii</option>
<option value="12">Idaho</option>
<option value="13">Illinois</option>
<option value="14">Indiana</option>
<option value="15">Iowa</option>
<option value="16">Kansas</option>
<option value="17">Kentucky</option>
<option value="18">Louisiana</option>
<option value="19">Maine</option>
<option value="53">Mariana Islands</option>
<option value="60">Marshall Islands</option>
<option value="20">Maryland</option>
<option value="21">Massachusetts</option>
<option value="22">Michigan</option>
<option value="59">Micronesia</option>
<option value="23">Minnesota</option>
<option value="24">Mississippi</option>
<option value="25">Missouri</option>
<option value="26">Montana</option>
<option value="27">Nebraska</option>
<option value="28">Nevada</option>
<option value="29">New Hampshire</option>
<option value="30">New Jersey</option>
<option value="31">New Mexico</option>
<option value="32">New York</option>
<option value="33">North Carolina</option>
<option value="34">North Dakota</option>
<option value="35">Ohio</option>
<option value="36">Oklahoma</option>
<option value="37">Oregon</option>
<option value="58">Pacific Trust Terr.</option>
<option value="61">Palau Islands</option>
<option value="38">Pennsylvania</option>
<option value="51">Puerto Rico</option>
<option value="39">Rhode Island</option>
<option value="40">South Carolina</option>
<option value="41">South Dakota</option>
<option value="42">Tennessee</option>
<option value="43">Texas</option>
<option value="57">US Outlying Islands</option>
<option value="44">Utah</option>
<option value="45">Vermont</option>
<option value="55">Virgin Islands</option>
<option value="46">Virginia</option>
<option value="47">Washington</option>
<option value="48">West Virginia</option>
<option value="49">Wisconsin</option>
<option value="50">Wyoming</option>
</datalist>
<input type="search" id="state" name="state" list="states_list" placeholder="Start typing or click" autocomplete="off">
I have a select box where the user can select the year s/he was born and I would like to start at 1970 when clicked but still keep "year" as the selected option by default.
Is there anyway (i.e. with JavaScript) I can start in the middle of the option range, like 1970, and have earlier years above and later years below?
Example:
<select>
<option selected>Year</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
</select>