Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37813 > unrolled thread

input type="color"

Back to article view | Back to comp.lang.javascript

Contents

  input type="color" Andrew Poulos <ap_prog@hotmail.com> - 2019-11-21 15:12 +1100
    Re: input type="color" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-21 12:24 +0100
    Re: input type="color" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-11-21 15:36 +0100
      Re: input type="color" Andrew Poulos <ap_prog@hotmail.com> - 2019-11-22 07:50 +1100
        Re: input type="color" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-11-22 01:01 +0100
    Re: input type="color" Jon Ribbens <jon+usenet@unequivocal.eu> - 2019-11-21 15:33 +0000
      Re: input type="color" Andrew Poulos <ap_prog@hotmail.com> - 2019-11-22 07:46 +1100
    Re: input type="color" Arno Welzel <usenet@arnowelzel.de> - 2019-11-22 10:26 +0100
      Re: input type="color" Jake Jarvis <pig_in_shoes@yahoo.com> - 2019-11-22 12:08 +0100
        Re: input type="color" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-22 13:12 +0100
          Re: input type="color" Andrew Poulos <ap_prog@hotmail.com> - 2019-11-23 13:55 +1100
            Re: input type="color" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-23 13:47 +0100
              Re: input type="color" Andrew Poulos <ap_prog@hotmail.com> - 2019-11-24 09:43 +1100
                Re: input type="color" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-24 10:12 +0100
        Re: input type="color" Arno Welzel <usenet@arnowelzel.de> - 2019-11-25 09:56 +0100
          Re: input type="color" Jon Ribbens <jon+usenet@unequivocal.eu> - 2019-11-25 12:36 +0000
            Re: input type="color" Julio Di Egidio <julio@diegidio.name> - 2019-11-25 07:41 -0800

#37813 — input type="color"

I've got an input type="color" and when the colour picker opens I can 
enter an RGB hex string but I need to be able to enter a typical hex 
string - three two-digit hexadecimal numbers eg #FA3366.

The behaviour of the picker seems odd to me because the default colour 
is set as typical hex.

Is there a way to "force" the picker to use hex or do I need to use a 
custom colour picker? If I do need to use a custom picker can someone 
please recommend one.

Andrew Poulos

[toc] | [next] | [standalone]

#37817

Andrew Poulos <ap_prog@hotmail.com> wrote on 21 Nov 2019 in 
comp.lang.javascript:

> I've got an input type="color" and when the colour picker opens I can 
> enter an RGB hex string but I need to be able to enter a typical hex 
> string - three two-digit hexadecimal numbers eg #FA3366.
> 
> The behaviour of the picker seems odd to me because the default colour 
> is set as typical hex.
> 
> Is there a way to "force" the picker to use hex or do I need to use a 
> custom colour picker? If I do need to use a custom picker can someone 
> please recommend one.

You don't need a colorpicker for that, use <input type='txt'

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#37818

Andrew Poulos wrote:

> I've got an input type="color" and when the colour picker opens I can
> enter an RGB hex string but I need to be able to enter a typical hex
> string - three two-digit hexadecimal numbers eg #FA3366.

ISTM that you are contradicting yourself.

In any case, the support for and look of the color picker control depends on 
the user agent and the operating system.  If you need a consistent and 
customizeable look, I suggest you use one of the available libraries or 
write your own.
 
> The behaviour of the picker seems odd to me because the default colour
> is set as typical hex.

Pardon?
 
> Is there a way to "force" the picker to use hex

No.  But by your description it is already “[using] hex”; you wrote: “I can 
enter an RGB hex string”.

> or do I need to use a custom colour picker?

Probably yes.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#37822

On 22/11/2019 1:36 am, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> I've got an input type="color" and when the colour picker opens I can
>> enter an RGB hex string but I need to be able to enter a typical hex
>> string - three two-digit hexadecimal numbers eg #FA3366.
> 
> ISTM that you are contradicting yourself.
> 
> In any case, the support for and look of the color picker control depends on
> the user agent and the operating system.  If you need a consistent and
> customizeable look, I suggest you use one of the available libraries or
> write your own.
>   
>> The behaviour of the picker seems odd to me because the default colour
>> is set as typical hex.
> 
> Pardon?

For a type="color" you set the default value as hex eg. "#FF0000" but 
when the dialog box opens you can't set the value as hex. Then when you 
select a colour of set the HSL or RGB the value set as hex.

>> Is there a way to "force" the picker to use hex
> 
> No.  But by your description it is already “[using] hex”; you wrote: “I can
> enter an RGB hex string”.

My bad, I meant an RGB triplet.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#37823

Andrew Poulos wrote:

> On 22/11/2019 1:36 am, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>> In any case, the support for and look of the color picker control depends
>> on the user agent and the operating system.  If you need a consistent and
>> customizeable look, I suggest you use one of the available libraries or
>> write your own.
>>   
>>> The behaviour of the picker seems odd to me because the default colour
>>> is set as typical hex.
>> 
>> Pardon?
> 
> For a type="color" you set the default value as hex eg. "#FF0000" but
> when the dialog box opens you can't set the value as hex. […]

I can.
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#37819

On 2019-11-21, Andrew Poulos <ap_prog@hotmail.com> wrote:
> I've got an input type="color" and when the colour picker opens I can 
> enter an RGB hex string but I need to be able to enter a typical hex 
> string - three two-digit hexadecimal numbers eg #FA3366.
>
> The behaviour of the picker seems odd to me because the default colour 
> is set as typical hex.
>
> Is there a way to "force" the picker to use hex or do I need to use a 
> custom colour picker? If I do need to use a custom picker can someone 
> please recommend one.

What the colour picker looks like and what forms of input it allows
will vary by browser. If you know the user understands hex colours
and want that to be the primary method of colour specification then
I'd suggest you have a text input for the hex code, next to that
have a colour picker input, and use some trivial javascript to
set the text input's value to the value of the colour picker when
the colour picker sends an 'input' or 'change' event.

e.g.
 
  <fieldset id="colorset" style="display: inline-block">
    <label for="textcolor">Color:</label>
    # <input type="text" maxlength="6" id="textcolor">
    <label for="colorpicker" style="position: absolute; left: -9999px">
      Choose color using picker
    </label>
    <input type="color" id="colorpicker">
  </fieldset>
  <script>
    var colorset = document.getElementById('colorset')
    var textcolor = document.getElementById('textcolor')
    var colorpicker = document.getElementById('colorpicker')
    function colorChanged () {
      textcolor.value = colorpicker.value.substring(1)
      colorset.style.borderColor = '#00ff00'
    }
    function textChanged () {
      if (/^[0-9a-fA-F]{6}$/.test(textcolor.value)) {
        colorpicker.value = '#' + textcolor.value
        colorset.style.borderColor = '#00ff00'
      } else {
        colorset.style.borderColor = '#ff0000'
      }
    }
    colorpicker.addEventListener('input', colorChanged)
    colorpicker.addEventListener('change', colorChanged)
    textcolor.addEventListener('input', textChanged)
    textcolor.addEventListener('change', textChanged)
    textChanged()
  </script>

[toc] | [prev] | [next] | [standalone]

#37821

On 22/11/2019 2:33 am, Jon Ribbens wrote:
> On 2019-11-21, Andrew Poulos <ap_prog@hotmail.com> wrote:
>> I've got an input type="color" and when the colour picker opens I can
>> enter an RGB hex string but I need to be able to enter a typical hex
>> string - three two-digit hexadecimal numbers eg #FA3366.
>>
>> The behaviour of the picker seems odd to me because the default colour
>> is set as typical hex.
>>
>> Is there a way to "force" the picker to use hex or do I need to use a
>> custom colour picker? If I do need to use a custom picker can someone
>> please recommend one.
> 
> What the colour picker looks like and what forms of input it allows
> will vary by browser. If you know the user understands hex colours
> and want that to be the primary method of colour specification then
> I'd suggest you have a text input for the hex code, next to that
> have a colour picker input, and use some trivial javascript to
> set the text input's value to the value of the colour picker when
> the colour picker sends an 'input' or 'change' event.
> 
> e.g.
>   
>    <fieldset id="colorset" style="display: inline-block">
>      <label for="textcolor">Color:</label>
>      # <input type="text" maxlength="6" id="textcolor">
>      <label for="colorpicker" style="position: absolute; left: -9999px">
>        Choose color using picker
>      </label>
>      <input type="color" id="colorpicker">
>    </fieldset>
>    <script>
>      var colorset = document.getElementById('colorset')
>      var textcolor = document.getElementById('textcolor')
>      var colorpicker = document.getElementById('colorpicker')
>      function colorChanged () {
>        textcolor.value = colorpicker.value.substring(1)
>        colorset.style.borderColor = '#00ff00'
>      }
>      function textChanged () {
>        if (/^[0-9a-fA-F]{6}$/.test(textcolor.value)) {
>          colorpicker.value = '#' + textcolor.value
>          colorset.style.borderColor = '#00ff00'
>        } else {
>          colorset.style.borderColor = '#ff0000'
>        }
>      }
>      colorpicker.addEventListener('input', colorChanged)
>      colorpicker.addEventListener('change', colorChanged)
>      textcolor.addEventListener('input', textChanged)
>      textcolor.addEventListener('change', textChanged)
>      textChanged()
>    </script>

Thanks, I'll go with this rather than using a 3rd party colour picker.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#37824

On 21.11.19 05:12, Andrew Poulos wrote:

> I've got an input type="color" and when the colour picker opens I can 
> enter an RGB hex string but I need to be able to enter a typical hex 
> string - three two-digit hexadecimal numbers eg #FA3366.
> 
> The behaviour of the picker seems odd to me because the default colour 
> is set as typical hex.

What is "typical hex"?

See here:

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color>

> Is there a way to "force" the picker to use hex or do I need to use a 
> custom colour picker? If I do need to use a custom picker can someone 
> please recommend one.

See above.


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#37828

Am 22.11.2019 um 10:26 schrieb Arno Welzel:
> On 21.11.19 05:12, Andrew Poulos wrote:
> 
>> I've got an input type="color" and when the colour picker opens I can
>> enter an RGB hex string but I need to be able to enter a typical hex
>> string - three two-digit hexadecimal numbers eg #FA3366.
>>
>> The behaviour of the picker seems odd to me because the default colour
>> is set as typical hex.
> 
> What is "typical hex"?
> 
> See here:
> 
> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color>
> 
>> Is there a way to "force" the picker to use hex or do I need to use a
>> custom colour picker? If I do need to use a custom picker can someone
>> please recommend one.
> 
> See above.
> 
> 

I am on Windows 10 (chrome, firefox) and get presented with a color 
picker widget that looks like the one from Paint, where you CANNOT input 
the colour as hex

[toc] | [prev] | [next] | [standalone]

#37834

Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 22 Nov 2019 in 
comp.lang.javascript:

> Am 22.11.2019 um 10:26 schrieb Arno Welzel:
>> On 21.11.19 05:12, Andrew Poulos wrote:
>> 
>>> I've got an input type="color" and when the colour picker opens I can
>>> enter an RGB hex string but I need to be able to enter a typical hex
>>> string - three two-digit hexadecimal numbers eg #FA3366.
>>>
>>> The behaviour of the picker seems odd to me because the default colour
>>> is set as typical hex.
>> 
>> What is "typical hex"?
>> 
>> See here:
>> 
>> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color>
>> 
>>> Is there a way to "force" the picker to use hex or do I need to use a
>>> custom colour picker? If I do need to use a custom picker can someone
>>> please recommend one.
>> 
>> See above.
>> 
>> 
> 
> I am on Windows 10 (chrome, firefox) and get presented with a color 
> picker widget that looks like the one from Paint, where you CANNOT input 
> the colour as hex

You don't even need a colourpicker when inputting a hex value,
as  it is just a string per definition.



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#37841

On 22/11/2019 11:12 pm, Evertjan. wrote:
> Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 22 Nov 2019 in
> comp.lang.javascript:

>> I am on Windows 10 (chrome, firefox) and get presented with a color
>> picker widget that looks like the one from Paint, where you CANNOT input
>> the colour as hex
> 
> You don't even need a colour picker when inputting a hex value,
> as it is just a string per definition.

Yep, almost everybody knows the difference between the #ff3300 and 
#ff5050 without actually needing to see the colours ;-)

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#37846

Andrew Poulos <ap_prog@hotmail.com> wrote on 23 Nov 2019 in 
comp.lang.javascript:

> On 22/11/2019 11:12 pm, Evertjan. wrote:
>> Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 22 Nov 2019 in
>> comp.lang.javascript:
> 
>>> I am on Windows 10 (chrome, firefox) and get presented with a color
>>> picker widget that looks like the one from Paint, where you CANNOT input
>>> the colour as hex
>> 
>> You don't even need a colour picker when inputting a hex value,
>> as it is just a string per definition.
> 
> Yep, almost everybody knows the difference between the #ff3300 and 
>#ff5050 without actually needing to see the colours ;-)

Nonsense, either you pick a colour, or you type a colour.

If you want the user to type a colour, 
you could show the colour after submission,
but that imho does not constitute to a colourpicker.

<style>
    	#showColour {width:120px;height:50px;border:black 2px solid;}
</style>

<div id='showColour'></div>
<br><br>
<input id='getColour'>

<script>
const getColour = document.querySelector('#getColour');
const showColour = document.querySelector('#showColour');
getColour.addEventListener("keyup", function() {
	showColour.style.backgroundColor = this.value;
});
</script>




-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#37851

On 23/11/2019 11:47 pm, Evertjan. wrote:
> Andrew Poulos <ap_prog@hotmail.com> wrote on 23 Nov 2019 in
> comp.lang.javascript:
> 
>> On 22/11/2019 11:12 pm, Evertjan. wrote:
>>> Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 22 Nov 2019 in
>>> comp.lang.javascript:
>>
>>>> I am on Windows 10 (chrome, firefox) and get presented with a color
>>>> picker widget that looks like the one from Paint, where you CANNOT input
>>>> the colour as hex
>>>
>>> You don't even need a colour picker when inputting a hex value,
>>> as it is just a string per definition.
>>
>> Yep, almost everybody knows the difference between the #ff3300 and
>> #ff5050 without actually needing to see the colours ;-)
> 
> Nonsense, either you pick a colour, or you type a colour.

No, if I pick a colour it must also display a string representation of 
that colour so that, should I want to use that colour again, I would be 
able to enter that value instead of trying to find it?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#37857

Andrew Poulos <ap_prog@hotmail.com> wrote on 23 Nov 2019 in 
comp.lang.javascript:

> No, if I pick a colour it must also display a string representation of 
> that colour

It "must" not, you are just adding specs to show you "are" right.

> so that, should I want to use that colour again, I would be 
> able to enter that value instead of trying to find it

> ?

"?" ?

<style>
	#showColour {width:120px;height:50px;border:black 2px solid;}
</style>
<div id='showColour'></div>
<div id='showColourString'></div>
<br><br>
<input id='getColour' value='#'>
<script>
const getColour = document.querySelector('#getColour');
const showColour = document.querySelector('#showColour');
const showColourString = document.querySelector('#showColourString');

getColour.addEventListener("keyup", function() {
	if (this.value.length == 4 || this.value.length == 7) {
		showColour.style.backgroundColor = this.value;
		showColourString.innerHTML =  this.value;
	};
});
</script>


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#37864

Jake Jarvis:

> Am 22.11.2019 um 10:26 schrieb Arno Welzel:
>> On 21.11.19 05:12, Andrew Poulos wrote:
>>
>>> I've got an input type="color" and when the colour picker opens I can
>>> enter an RGB hex string but I need to be able to enter a typical hex
>>> string - three two-digit hexadecimal numbers eg #FA3366.
[...]
>> See here:
>>
>> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color>
[...]
> I am on Windows 10 (chrome, firefox) and get presented with a color 
> picker widget that looks like the one from Paint, where you CANNOT input 
> the colour as hex

That's the way it's supposed to work. That's why I referred to the
documentation at Mozilla. If there is no way documented to change this,
you have to live with it or create your own color picker.

BTW: At least Windows 10 allows to enter the values for R, G and B as
seperate numbers.


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#37866

On 2019-11-25, Arno Welzel <usenet@arnowelzel.de> wrote:
> Jake Jarvis:
>> I am on Windows 10 (chrome, firefox) and get presented with a color 
>> picker widget that looks like the one from Paint, where you CANNOT input 
>> the colour as hex
>
> That's the way it's supposed to work. That's why I referred to the
> documentation at Mozilla. If there is no way documented to change this,
> you have to live with it or create your own color picker.

Or use the hybrid method I already posted in the thread...
Making your own colour picker from scratch would be ill advised.

> BTW: At least Windows 10 allows to enter the values for R, G and B as
> seperate numbers.

I just did a quick check and some Windows 10 browsers allow it and
some don't - for example, Microsoft Edge does not (it has a fairly
rubbish dialog with HSV sliders and nothing else).

On Mac OS, they seem to use a *very* fancy dialog with five tabs each
of which contain many controls - this does allow RGB entry in both
decimal and hexadecimal, but it takes 3 clicks to get to that part of
the dialog.

The different attitudes are interesting - Mac OS is clearly catering
for design/print professionals, whereas Microsoft Edge seems to be
aimed at kindergarteners.

[toc] | [prev] | [next] | [standalone]

#37867

On Monday, 25 November 2019 13:37:00 UTC+1, Jon Ribbens  wrote:
> On 2019-11-25, Arno Welzel <usenet@arnowelzel.de> wrote:
> > Jake Jarvis:
> >> I am on Windows 10 (chrome, firefox) and get presented with a color 
> >> picker widget that looks like the one from Paint, where you CANNOT input 
> >> the colour as hex
> >
> > That's the way it's supposed to work. That's why I referred to the
> > documentation at Mozilla. If there is no way documented to change this,
> > you have to live with it or create your own color picker.
> 
> Or use the hybrid method I already posted in the thread...
> Making your own colour picker from scratch would be ill advised.

Well, maybe a little bit of a pain and it's usually pointless to start from
scratch, but ill-advised is just nonsense with vendors-based development in
the background...

Julio

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web