Allow users to manually type in values?

[Philip Schaffer]

Am I missing something or does the latest version of the color picker not allow the user to manually type in a color value?

It looks like this was allowed in older versions but now if I try to manually type in a hex value, the input field just immediately sets the value to what it was previously. I think this could be frustrating for users to be honest. Is there a setting to to disable this feature?

[Philip Schaffer]

Whoops, did not see the autoInputFallback option. This is why I need to stop coding late at night :)

[Philip Schaffer]

Spoke too soon again, setting autoInputFallback to false is still not a solution. The user can type in 3 characters and then the input field will get overridden by the color picker. Definitely not a good user experience. Looks like there was some previous discussion on this issue here but the issue was closed automatically: https://github.com/farbelous/bootstrap-colorpicker/issues/277

Users should be able to easily input a hex value manually in my opinion without having the color picker automatically overriding their input. Maybe there could be some option to only validate the color once the color picker loses focus or something along those lines?

[Dagi93]

Had the same problem and used the code from the events page ("Using events with a custom template element") to write a workaround. Nevertheless, I also think this is something there should be an option for.

HTML:

<div class="input-group colorpicker-element">
    <input class="form-control input-block color-io" />
    <span class="input-group-append">
        <span id="color_picker" class="input-group colorpicker-element" title="Using input value">
            <input type="hidden" class="form-control input-lg" name="color" value="#000000">
            <span class="input-group-text colorpicker-input-addon" data-original-title="" title="" tabindex="0">
                <i style="background: #000000"></i>
            </span>
        </span>
    </span>
</div>

JS:

    <script type="text/javascript">

        $(document).ready(function () {
            let color_picker = $('#color_picker').colorpicker()
            .on('colorpickerCreate', function (e) {
                // initialize the input on colorpicker creation
                var io = $('.color-io');

                io.val(e.color.string());

                io.on('change keyup', function () {
                    e.colorpicker.setValue(io.val());
                });
            })
            .on('colorpickerChange', function (e) {
                var io = $('.color-io');

                if (e.value === io.val() || !e.color || !e.color.isValid()) {
                    // do not replace the input value if the color is invalid or equals
                    return;
                }

                io.val(e.color.string());
            });
        });

    </script>

[Javi Aguilar]

if you don't want the input to be replaced, then you don't have to link it to the colorpicker.
You could just use an independent input and use the colorpicker events to do whatever you need with the input.

There is no need for an option for this, IMHO, but feel free to implement it if you think so. Pull Requests following the CONTRIBUTING.md guidelines are welcome.

[es-daniel]

Had the same problem and used the code from the events page ("Using events with a custom template element") to write a workaround. Nevertheless, I also think this is something there should be an option for.

HTML:

<div class="input-group colorpicker-element">
    <input class="form-control input-block color-io" />
    <span class="input-group-append">
        <span id="color_picker" class="input-group colorpicker-element" title="Using input value">
            <input type="hidden" class="form-control input-lg" name="color" value="#000000">
            <span class="input-group-text colorpicker-input-addon" data-original-title="" title="" tabindex="0">
                <i style="background: #000000"></i>
            </span>
        </span>
    </span>
</div>

JS:

    <script type="text/javascript">

        $(document).ready(function () {
            let color_picker = $('#color_picker').colorpicker()
            .on('colorpickerCreate', function (e) {
                // initialize the input on colorpicker creation
                var io = $('.color-io');

                io.val(e.color.string());

                io.on('change keyup', function () {
                    e.colorpicker.setValue(io.val());
                });
            })
            .on('colorpickerChange', function (e) {
                var io = $('.color-io');

                if (e.value === io.val() || !e.color || !e.color.isValid()) {
                    // do not replace the input value if the color is invalid or equals
                    return;
                }

                io.val(e.color.string());
            });
        });

    </script>

This solution from Dagi93 doesn't work for me. But I made some changes on the JS and it works, you can see the changes bellow:

let color_picker = $('#color_picker').colorpicker()
        .on('colorpickerChange', function (e) {
            var io = $('.color-io');

            if (e.value === io.val() || !e.color || !e.color.isValid()) {
                // do not replace the input value if the color is invalid or equals
                return;
            }
            io.val(e.color.string());
        });

    var io = $('.color-io');

    io.val(color_picker.colorpicker('getValue'));

    io.on('change keyup', function () {
        color_picker.colorpicker("setValue", io.val());
    });

[Tobias Kunze]

I can only echo the requests – allowing a user to type in the field, but having their input expanded to "#112233" after typing "#123" is horrible UX, and with no obvious or stable workaround, this is a major use case that is broken. Any workaround (or ideally constructor option) would be very appreciated.

[Alex Nathanail]

+1

[Max]

+1