datalist.json 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625
  1. {
  2. "title":"Datalist element",
  3. "description":"Method of setting a list of options for a user to select in a text field, while leaving the ability to enter a custom value.",
  4. "spec":"https://html.spec.whatwg.org/multipage/forms.html#the-datalist-element",
  5. "status":"ls",
  6. "links":[
  7. {
  8. "url":"https://hacks.mozilla.org/2010/11/firefox-4-html5-forms/",
  9. "title":"Mozilla Hacks article"
  10. },
  11. {
  12. "url":"https://afarkas.github.io/webshim/demos/",
  13. "title":"HTML5 Library including datalist support"
  14. },
  15. {
  16. "url":"https://developer.mozilla.org/en/HTML/Element/datalist",
  17. "title":"MDN Web Docs - datalist"
  18. },
  19. {
  20. "url":"https://webplatform.github.io/docs/html/elements/datalist",
  21. "title":"WebPlatform Docs"
  22. },
  23. {
  24. "url":"https://demo.agektmr.com/datalist/",
  25. "title":"Eiji Kitamura's options demos & tests"
  26. },
  27. {
  28. "url":"https://github.com/thgreasi/datalist-polyfill",
  29. "title":"Minimal Datalist polyfill w/tutorial"
  30. },
  31. {
  32. "url":"https://github.com/mfranzke/datalist-polyfill",
  33. "title":"Minimal and library dependency-free vanilla JavaScript polyfill"
  34. }
  35. ],
  36. "bugs":[
  37. {
  38. "description":"In UIWebView Apps in iOS 12.2, using the datalist element may cause the input type to become incapable of being able to type in it despite not supporting it."
  39. },
  40. {
  41. "description":"While all options are part of the source code, Chromium browsers can only show the first 512 options in the dropdown list."
  42. }
  43. ],
  44. "categories":[
  45. "HTML5"
  46. ],
  47. "stats":{
  48. "ie":{
  49. "5.5":"n",
  50. "6":"p",
  51. "7":"p",
  52. "8":"p",
  53. "9":"p",
  54. "10":"a #2",
  55. "11":"a #2"
  56. },
  57. "edge":{
  58. "12":"a #2",
  59. "13":"a #2",
  60. "14":"a #2",
  61. "15":"a #2",
  62. "16":"a #2 #4",
  63. "17":"a #2 #4",
  64. "18":"a #2 #4",
  65. "79":"y",
  66. "80":"y",
  67. "81":"y",
  68. "83":"y",
  69. "84":"y",
  70. "85":"y",
  71. "86":"y",
  72. "87":"y",
  73. "88":"y",
  74. "89":"y",
  75. "90":"y",
  76. "91":"y",
  77. "92":"y",
  78. "93":"y",
  79. "94":"y",
  80. "95":"y",
  81. "96":"y",
  82. "97":"y",
  83. "98":"y",
  84. "99":"y",
  85. "100":"y",
  86. "101":"y",
  87. "102":"y",
  88. "103":"y",
  89. "104":"y",
  90. "105":"y",
  91. "106":"y",
  92. "107":"y",
  93. "108":"y",
  94. "109":"y",
  95. "110":"y",
  96. "111":"y",
  97. "112":"y",
  98. "113":"y",
  99. "114":"y",
  100. "115":"y",
  101. "116":"y",
  102. "117":"y",
  103. "118":"y",
  104. "119":"y",
  105. "120":"y"
  106. },
  107. "firefox":{
  108. "2":"p",
  109. "3":"p",
  110. "3.5":"p",
  111. "3.6":"p",
  112. "4":"a #3 #6",
  113. "5":"a #3 #6",
  114. "6":"a #3 #6",
  115. "7":"a #3 #6",
  116. "8":"a #3 #6",
  117. "9":"a #3 #6",
  118. "10":"a #3 #6",
  119. "11":"a #3 #6",
  120. "12":"a #3 #6",
  121. "13":"a #3 #6",
  122. "14":"a #3 #6",
  123. "15":"a #3 #6",
  124. "16":"a #3 #6",
  125. "17":"a #3 #6",
  126. "18":"a #3 #6",
  127. "19":"a #3 #6",
  128. "20":"a #3 #6",
  129. "21":"a #3 #6",
  130. "22":"a #3 #6",
  131. "23":"a #3 #6",
  132. "24":"a #3 #6",
  133. "25":"a #3 #6",
  134. "26":"a #3 #6",
  135. "27":"a #3 #6",
  136. "28":"a #3 #6",
  137. "29":"a #3 #6",
  138. "30":"a #3 #6",
  139. "31":"a #3 #6",
  140. "32":"a #3 #6",
  141. "33":"a #3 #6",
  142. "34":"a #3 #6",
  143. "35":"a #3 #6",
  144. "36":"a #3 #6",
  145. "37":"a #3 #6",
  146. "38":"a #3 #6",
  147. "39":"a #3 #6",
  148. "40":"a #3 #6",
  149. "41":"a #3 #6",
  150. "42":"a #3 #6",
  151. "43":"a #3 #6",
  152. "44":"a #3 #6",
  153. "45":"a #3 #6",
  154. "46":"a #3 #6",
  155. "47":"a #3 #6",
  156. "48":"a #3 #6",
  157. "49":"a #3 #6",
  158. "50":"a #3 #6",
  159. "51":"a #3 #6",
  160. "52":"a #3 #6",
  161. "53":"a #3 #6",
  162. "54":"a #3 #6",
  163. "55":"a #3 #6",
  164. "56":"a #3 #6",
  165. "57":"a #3 #6",
  166. "58":"a #3 #6",
  167. "59":"a #3 #6",
  168. "60":"a #3 #6",
  169. "61":"a #3 #6",
  170. "62":"a #3 #6",
  171. "63":"a #3 #6",
  172. "64":"a #3 #6",
  173. "65":"a #3 #6",
  174. "66":"a #3 #6",
  175. "67":"a #3 #6",
  176. "68":"a #3 #6",
  177. "69":"a #3 #6",
  178. "70":"a #3 #6",
  179. "71":"a #3 #6",
  180. "72":"a #3 #6",
  181. "73":"a #3 #6",
  182. "74":"a #3 #6",
  183. "75":"a #3 #6",
  184. "76":"a #3 #6",
  185. "77":"a #3 #6",
  186. "78":"a #3 #6",
  187. "79":"a #3 #6",
  188. "80":"a #3 #6",
  189. "81":"a #3 #6",
  190. "82":"a #3 #6",
  191. "83":"a #3 #6",
  192. "84":"a #3 #6",
  193. "85":"a #3 #6",
  194. "86":"a #3 #6",
  195. "87":"a #3 #6",
  196. "88":"a #3 #6",
  197. "89":"a #3 #6",
  198. "90":"a #3 #6",
  199. "91":"a #3 #6",
  200. "92":"a #3 #6",
  201. "93":"a #3 #6",
  202. "94":"a #3 #6",
  203. "95":"a #3 #6",
  204. "96":"a #3 #6",
  205. "97":"a #3 #6",
  206. "98":"a #3 #6",
  207. "99":"a #3 #6",
  208. "100":"a #3 #6",
  209. "101":"a #3 #6",
  210. "102":"a #3",
  211. "103":"a #3",
  212. "104":"a #3",
  213. "105":"a #3",
  214. "106":"a #3",
  215. "107":"a #3",
  216. "108":"a #3",
  217. "109":"a #3",
  218. "110":"y",
  219. "111":"y",
  220. "112":"y",
  221. "113":"y",
  222. "114":"y",
  223. "115":"y",
  224. "116":"y",
  225. "117":"y",
  226. "118":"y",
  227. "119":"y",
  228. "120":"y",
  229. "121":"y",
  230. "122":"y",
  231. "123":"y"
  232. },
  233. "chrome":{
  234. "4":"p",
  235. "5":"p",
  236. "6":"p",
  237. "7":"p",
  238. "8":"p",
  239. "9":"p",
  240. "10":"p",
  241. "11":"p",
  242. "12":"p",
  243. "13":"p",
  244. "14":"p",
  245. "15":"p",
  246. "16":"p",
  247. "17":"p",
  248. "18":"p",
  249. "19":"p",
  250. "20":"a #1",
  251. "21":"a #1",
  252. "22":"a #1",
  253. "23":"a #1",
  254. "24":"a #1",
  255. "25":"a #1",
  256. "26":"a #1",
  257. "27":"a #1",
  258. "28":"a #1",
  259. "29":"a #1",
  260. "30":"a #1",
  261. "31":"a #1",
  262. "32":"a #1",
  263. "33":"a #1",
  264. "34":"a #1",
  265. "35":"a #1",
  266. "36":"a #1",
  267. "37":"a #1",
  268. "38":"a #1",
  269. "39":"a #1",
  270. "40":"a #1",
  271. "41":"a #1",
  272. "42":"a #1",
  273. "43":"a #1",
  274. "44":"a #1",
  275. "45":"a #1",
  276. "46":"a #1",
  277. "47":"a #1",
  278. "48":"a #1",
  279. "49":"a #1",
  280. "50":"a #1",
  281. "51":"a #1",
  282. "52":"a #1",
  283. "53":"a #1",
  284. "54":"a #1",
  285. "55":"a #1",
  286. "56":"a #1",
  287. "57":"a #1",
  288. "58":"a #1",
  289. "59":"a #1",
  290. "60":"a #1",
  291. "61":"a #1",
  292. "62":"a #1",
  293. "63":"a #1",
  294. "64":"a #1",
  295. "65":"a #1",
  296. "66":"a #1",
  297. "67":"a #1",
  298. "68":"a #1",
  299. "69":"y",
  300. "70":"y",
  301. "71":"y",
  302. "72":"y",
  303. "73":"y",
  304. "74":"y",
  305. "75":"y",
  306. "76":"y",
  307. "77":"y",
  308. "78":"y",
  309. "79":"y",
  310. "80":"y",
  311. "81":"y",
  312. "83":"y",
  313. "84":"y",
  314. "85":"y",
  315. "86":"y",
  316. "87":"y",
  317. "88":"y",
  318. "89":"y",
  319. "90":"y",
  320. "91":"y",
  321. "92":"y",
  322. "93":"y",
  323. "94":"y",
  324. "95":"y",
  325. "96":"y",
  326. "97":"y",
  327. "98":"y",
  328. "99":"y",
  329. "100":"y",
  330. "101":"y",
  331. "102":"y",
  332. "103":"y",
  333. "104":"y",
  334. "105":"y",
  335. "106":"y",
  336. "107":"y",
  337. "108":"y",
  338. "109":"y",
  339. "110":"y",
  340. "111":"y",
  341. "112":"y",
  342. "113":"y",
  343. "114":"y",
  344. "115":"y",
  345. "116":"y",
  346. "117":"y",
  347. "118":"y",
  348. "119":"y",
  349. "120":"y",
  350. "121":"y",
  351. "122":"y",
  352. "123":"y"
  353. },
  354. "safari":{
  355. "3.1":"p",
  356. "3.2":"p",
  357. "4":"p",
  358. "5":"p",
  359. "5.1":"p",
  360. "6":"p",
  361. "6.1":"p",
  362. "7":"p",
  363. "7.1":"p",
  364. "8":"p",
  365. "9":"p",
  366. "9.1":"p",
  367. "10":"p",
  368. "10.1":"p",
  369. "11":"p",
  370. "11.1":"p",
  371. "12":"p",
  372. "12.1":"y",
  373. "13":"y",
  374. "13.1":"y",
  375. "14":"y",
  376. "14.1":"y",
  377. "15":"y",
  378. "15.1":"y",
  379. "15.2-15.3":"y",
  380. "15.4":"y",
  381. "15.5":"y",
  382. "15.6":"y",
  383. "16.0":"y",
  384. "16.1":"y",
  385. "16.2":"y",
  386. "16.3":"y",
  387. "16.4":"y",
  388. "16.5":"y",
  389. "16.6":"y",
  390. "17.0":"y",
  391. "17.1":"y",
  392. "17.2":"y",
  393. "TP":"y"
  394. },
  395. "opera":{
  396. "9":"y",
  397. "9.5-9.6":"y",
  398. "10.0-10.1":"y",
  399. "10.5":"y",
  400. "10.6":"y",
  401. "11":"y",
  402. "11.1":"y",
  403. "11.5":"y",
  404. "11.6":"y",
  405. "12":"y",
  406. "12.1":"y",
  407. "15":"a #1",
  408. "16":"a #1",
  409. "17":"a #1",
  410. "18":"a #1",
  411. "19":"a #1",
  412. "20":"a #1",
  413. "21":"a #1",
  414. "22":"a #1",
  415. "23":"a #1",
  416. "24":"a #1",
  417. "25":"a #1",
  418. "26":"a #1",
  419. "27":"a #1",
  420. "28":"a #1",
  421. "29":"a #1",
  422. "30":"a #1",
  423. "31":"a #1",
  424. "32":"a #1",
  425. "33":"a #1",
  426. "34":"a #1",
  427. "35":"a #1",
  428. "36":"a #1",
  429. "37":"a #1",
  430. "38":"a #1",
  431. "39":"a #1",
  432. "40":"a #1",
  433. "41":"a #1",
  434. "42":"a #1",
  435. "43":"a #1",
  436. "44":"a #1",
  437. "45":"a #1",
  438. "46":"a #1",
  439. "47":"a #1",
  440. "48":"a #1",
  441. "49":"a #1",
  442. "50":"a #1",
  443. "51":"a #1",
  444. "52":"a #1",
  445. "53":"a #1",
  446. "54":"a #1",
  447. "55":"a #1",
  448. "56":"a #1",
  449. "57":"a #1",
  450. "58":"a #1",
  451. "60":"a #1",
  452. "62":"a #1",
  453. "63":"a #1",
  454. "64":"y",
  455. "65":"y",
  456. "66":"y",
  457. "67":"y",
  458. "68":"y",
  459. "69":"y",
  460. "70":"y",
  461. "71":"y",
  462. "72":"y",
  463. "73":"y",
  464. "74":"y",
  465. "75":"y",
  466. "76":"y",
  467. "77":"y",
  468. "78":"y",
  469. "79":"y",
  470. "80":"y",
  471. "81":"y",
  472. "82":"y",
  473. "83":"y",
  474. "84":"y",
  475. "85":"y",
  476. "86":"y",
  477. "87":"y",
  478. "88":"y",
  479. "89":"y",
  480. "90":"y",
  481. "91":"y",
  482. "92":"y",
  483. "93":"y",
  484. "94":"y",
  485. "95":"y",
  486. "96":"y",
  487. "97":"y",
  488. "98":"y",
  489. "99":"y",
  490. "100":"y",
  491. "101":"y",
  492. "102":"y",
  493. "103":"y",
  494. "104":"y"
  495. },
  496. "ios_saf":{
  497. "3.2":"p",
  498. "4.0-4.1":"p",
  499. "4.2-4.3":"p",
  500. "5.0-5.1":"p",
  501. "6.0-6.1":"p",
  502. "7.0-7.1":"p",
  503. "8":"p",
  504. "8.1-8.4":"p",
  505. "9.0-9.2":"p",
  506. "9.3":"p",
  507. "10.0-10.2":"p",
  508. "10.3":"p",
  509. "11.0-11.2":"p",
  510. "11.3-11.4":"p",
  511. "12.0-12.1":"p",
  512. "12.2-12.5":"y #5",
  513. "13.0-13.1":"y #5",
  514. "13.2":"y #5",
  515. "13.3":"y #5",
  516. "13.4-13.7":"y #5",
  517. "14.0-14.4":"y #5",
  518. "14.5-14.8":"y #5",
  519. "15.0-15.1":"y #5",
  520. "15.2-15.3":"y #5",
  521. "15.4":"y #5",
  522. "15.5":"y #5",
  523. "15.6-15.7":"y #5",
  524. "16.0":"y #5",
  525. "16.1":"y #5",
  526. "16.2":"y #5",
  527. "16.3":"y #5",
  528. "16.4":"y #5",
  529. "16.5":"y #5",
  530. "16.6-16.7":"y #5",
  531. "17.0":"y #5",
  532. "17.1":"y #5",
  533. "17.2":"y #5"
  534. },
  535. "op_mini":{
  536. "all":"n"
  537. },
  538. "android":{
  539. "2.1":"p",
  540. "2.2":"p",
  541. "2.3":"p",
  542. "3":"p",
  543. "4":"p",
  544. "4.1":"p",
  545. "4.2-4.3":"p",
  546. "4.4":"p",
  547. "4.4.3-4.4.4":"y",
  548. "119":"y"
  549. },
  550. "bb":{
  551. "7":"p",
  552. "10":"y"
  553. },
  554. "op_mob":{
  555. "10":"y",
  556. "11":"y",
  557. "11.1":"y",
  558. "11.5":"y",
  559. "12":"y",
  560. "12.1":"y",
  561. "73":"y"
  562. },
  563. "and_chr":{
  564. "119":"y"
  565. },
  566. "and_ff":{
  567. "119":"n"
  568. },
  569. "ie_mob":{
  570. "10":"p",
  571. "11":"p"
  572. },
  573. "and_uc":{
  574. "15.5":"y"
  575. },
  576. "samsung":{
  577. "4":"y",
  578. "5.0-5.4":"y",
  579. "6.2-6.4":"y",
  580. "7.2-7.4":"y",
  581. "8.2":"y",
  582. "9.2":"y",
  583. "10.1":"y",
  584. "11.1-11.2":"y",
  585. "12.0":"y",
  586. "13.0":"y",
  587. "14.0":"y",
  588. "15.0":"y",
  589. "16.0":"y",
  590. "17.0":"y",
  591. "18.0":"y",
  592. "19.0":"y",
  593. "20":"y",
  594. "21":"y",
  595. "22":"y",
  596. "23":"y"
  597. },
  598. "and_qq":{
  599. "13.1":"y"
  600. },
  601. "baidu":{
  602. "13.18":"y"
  603. },
  604. "kaios":{
  605. "2.5":"n",
  606. "3.0-3.1":"n"
  607. }
  608. },
  609. "notes":"While most commonly used on text fields, datalists can also be used on other input types. IE11 supports the element on `range` fields. Chrome and Opera also support datalists to suggest given values on `range`, `color` and date/time fields. ",
  610. "notes_by_num":{
  611. "1":"Partial support refers to [a bug](https://bugs.chromium.org/p/chromium/issues/detail?id=773041) where long lists of items are unscrollable resulting in unselectable options.",
  612. "2":"Partial support in IE refers to [significantly buggy behavior](https://web.archive.org/web/20170121011936/http://playground.onereason.eu/2013/04/ie10s-lousy-support-for-datalists/) (IE11+ does send the input and change events upon selection). ",
  613. "3":"Partial support refers to no support for datalists on non-text fields (e.g. number, [range](https://bugzilla.mozilla.org/show_bug.cgi?id=841942), [color](https://bugzilla.mozilla.org/show_bug.cgi?id=960984)).",
  614. "4":"Partial support in Edge refers [to disappearing option elements on focusing the input element via tab](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/20066595/).",
  615. "5":"Supported through WKWebView and Safari but not through UIWebView",
  616. "6":"In Firefox, autocomplete must be set to off to make dynamic datalist work due to [a bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1474137)"
  617. },
  618. "usage_perc_y":96.33,
  619. "usage_perc_a":1.13,
  620. "ucprefix":false,
  621. "parent":"",
  622. "keywords":"list attribute,input",
  623. "chrome_id":"6090950820495360",
  624. "shown":true
  625. }