Question

我尝试实现的是文本输入和textareas可用的占位符行为：占位符具有不同的颜色，如果用户输入值，然后将其删除，则占位符值和占位符颜色都会重置。

具体案例：我们有一个带有所谓占位符选项的精选项目，其中此选项的文字为“选择处理”和“＃39;选择处理＆＃39;并且选项的值为空。我想让select元素按以下方式运行：

ON DOCUMENT READY：所选选项是占位符选项，颜色是占位符颜色;
ON SELECT MOUSEDOWN（或CLICK）选择和选项颜色更改为默认值 - 如果所选选项不是占位符选项，它仍然是默认颜色;
如果重新选择了PLACEHOLDER选项，颜色会再次变为占位符颜色。

现在，据我所知，这是无法实现的。我尝试将适当的颜色变化绑定到mousedown，点击和更改事件，以及所有可以想象的变化，但事情最终并不起作用。会发生什么：

在文档就绪时，事情有效：选择颜色是占位符颜色。
在FIRST SELECT MOUSEDOWN上，一切正常，一切都变为默认颜色。
选择值比PLACEHOLDER更有价值的东西，颜色仍然是默认颜色。
重新选择PLACEHOLDER这件事情有效 - 颜色会重置为占位符颜色。

AND THEN BOOM - ＆gt; 5.在另一个SELECT MOUSEDOWN上，颜色不会变为默认颜色。

我尝试的代码，至少有一个变体，是（optionvals.color_sec是保持默认颜色的变量）：

// Select field type color manipulation
$('.noosa-contact-form select').css('color', '#ccc');

$('.noosa-contact-form select').on( 'change', function() {

    $this = $(this);

    if ( $this.val() == '' )
        $(this).css('color', '#ccc');
    else {
        $this.css('color', optionvals.color_sec);
    }

} )

非常感谢任何帮助。

Answer 1

好的，最后它出来了，这是可能的。愉快的一天！！通过将select和option同时包含在样式中，可以实现所需的效果。

jQuery(document).ready(function($) {

    $('select').css('color', '#ccc');
    $('option[value=""]').addClass('placeholder');

    $('select').on('mousedown', function() {

        $('option:not(.placeholder)', this).css('color', '#db0a5b');
        $('.placeholder', this).css('color', '#ccc');

    })

    $('select').on('change', function() {

        if ($(this).val() == '') {
            $(this).css('color', '#ccc');
        } else {
            $(this).css('color', '#db0a5b');
        }

    })

})

可以在https://jsfiddle.net/jpsafgqz/17/

看到工作示例

感谢guest271714指出我正确的方向。

占位符行为包括选择的自定义颜色 - 这真的不可能吗？

1 个答案: