MozillaZine

Editable select as ComboBox

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
JesúsSD
 
Posts: 4
Joined: August 1st, 2015, 3:24 am

Post Posted August 1st, 2015, 3:30 am

I need a drop down icon and label attribute in Input with datalist features as Opera or Chrome.
Image
IMG: https://lh3.googleusercontent.com/B2IHx ... 34-h339-no
http://triancal.esy.es Chrome browser:
Image

Hello,
I am the developer of the page http://triancal.esy.es and (Online triangle calculator) i use many JavaScript to simulate a ComboBox using the Input + datalist tag but it has many limitations.

I would like that you add new parameters to "select" tag to become as a ComboBox (select editable="true") where you could add values that not are in the drop-down list (add exact="false" parameter).

In addition to numeric values could set various limits (greater than, greater or equal than, less than, less or equal than, different to), steps icons as tag number to increase or decrease values inside a range and would not be bad to change the border color when a value is inside limits have green and red when no (limitcolors="true").

Greetings Jesus.

---------------------------------
Google Translate version:

I'm the developer of the page and use much http://triancal.esy.es JavaScript to simulate a ComboBox using the Input + datalist tag but it has many limitations.

I would like them to add new parameters to select tag to make it editable "editable = true" to make it a combo box where you could add values ​​not you were in the dropdown list "DataList" exact = "false".

In addition, that for numeric values ​​could set various limits (greater, greater or equal, less, or less, than a) and icons step (increase or decrease) within a range such as we tag number and regular expressions for type the alphabet.

Neither would be wrong also to change the border color when a value was within the limits had green and red when it is not, as a method of visual validation (If the "ESC" key you pressed it back to the initial value of the select) and Add to correct parameter = "true" to show an error message when leaving the element value was wrong with the options "start value" or "Correct".

Greetings Jesus.

Hola,

Soy el desarrollador de la pagina http://triancal.esy.es y uso mucho JavaScript para simular un ComboBox mediante el tag Input + datalist pero tiene muchas limitaciones.

Quisiera que añadieran nuevos parametros al tag select para convertirlo en editable "editable=true" para convertirlo en un ComboBox en el que se pudieran añadir valores que no estubieran en la lista desplegable "datalist" exact="false".

Además, de que para valores numéricos se pudieran establecer varios limites (mayor, mayor o igual, menor, menor o igual, distinto a) e iconos step (increase o decrease) dentro de un rango como como en nos tag number y espresiones regulares para los de tipo alfabético.

Tampoco estaria mal también que cambiara el color del borde cuando un valor estuviera dentro de los limites tuviera color verde y rojo cuando no, como metodo de validación visual (Si se pulsara la tecla "ESC" se volvería al valor inicial del select) y también añadir en parametro correct="true" que mostrara un mensaje de error cuando al salir del elemento el valor fuera incorrecto con las opciones de "Valor inicial" o "Corregir".

Saludos Jesús.
Last edited by JesúsSD on August 5th, 2015, 11:58 am, edited 1 time in total.

DanRaisch
Moderator

User avatar
 
Posts: 118050
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted August 1st, 2015, 4:09 am

Moving to Web Development.

AlfonsoML
 
Posts: 386
Joined: September 6th, 2006, 1:39 pm

Post Posted August 2nd, 2015, 11:40 am

Sorry, I tried to load that page but it says that I must use Chrome

trolly
Moderator

User avatar
 
Posts: 39879
Joined: August 22nd, 2005, 7:25 am

Post Posted August 2nd, 2015, 11:53 am

Works for me but no drop down visible unless i begin typing.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted August 2nd, 2015, 2:48 pm

Generally speaking, Mozilla refers to the HTML specification(s)/standard(s) for how controls behave, and tries to minimize proprietary behaviors.

https://developer.mozilla.org/docs/Web/ ... ent/select

The HTML5 "Recommendation" seems to suggest creating comboboxes by using an <input type="text"> together with a <ul> element: http://www.w3.org/TR/wai-aria/roles#combobox

However, I only spent a few minutes looking into this and there might be other approaches consistent with the Recommendation.

JesúsSD
 
Posts: 4
Joined: August 1st, 2015, 3:24 am

Post Posted August 3rd, 2015, 2:43 pm

I need a drop down icon and label attribute in datalist features. Thanks.

IMG https://lh3.googleusercontent.com/B2IHx ... 34-h339-no

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted August 5th, 2015, 7:52 pm

There's no denying that Chrome's display is nicer than Firefox's. Since form controls are notoriously hard to modify with CSS, I think you should file a bug or two. When I search, I do not see either of these:

(1) Add a visual cue to an input that it has a datalist (parity-Chrome)
(2) Display value along with textContent (parity-Chrome)

Query: https://bugzilla.mozilla.org/buglist.cg ... ct=Toolkit

I can see in reading a couple of the bugs that people want the list to work just like a form autocomplete list, but allowing sites a little more play would be nice for developers.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: Google [Bot] and 2 guests