在 Firefox 中单击输入时，如何防止占位符隐藏？答案

【问题标题】：How do I keep placeholders from hiding when clicking on a input in Firefox?在 Firefox 中单击输入时，如何防止占位符隐藏？
【发布时间】：2012-07-13 09:18:33
【问题描述】：

我需要一些有关 Firefox 浏览器问题的帮助吗？

我有一个占位符的输入：

<input id="contact_lastname" type="text" value="" name="contact_lastname" size="45" placeholder="Type your last name" style="-moz-user-select: none; -moz-user-input: disabled; -moz-user-modify: read-only;" autocomplete="off">

仅在 Firefox 中，当我单击该输入框时，占位符会消失，然后才会出现不可选择的部分。是否有某种方法可以禁用 html5 事件，实际上每次单击时都会隐藏占位符无法选择的输入？

我已经尝试过这些 CSS 值：

-moz-user-input: disabled
-moz-user-modify: read-only
-moz-user-select: none
user-select: none

我错过了一个吗？

【问题讨论】：

标签： css html firefox placeholder

【解决方案1】：

在输入字段上：

disabled="disabled"

【讨论】：

【解决方案2】：

问题不是占位符消失的事实，而是点击离开时没有回来的事实。我已将其更改为实际上是这样工作的：

<script type="text/javascript">
$.fn.disableSelection = function () {
        return this.each(function () {
            if ( $.browser.mozilla ) // Firefox
            {
                $(this).attr('autocomplete', 'off');
                $(this).keydown(function() { return false; });
                $(this).css('MozUserModify', 'read-only');
            }
            else if ( $.browser.webkit ) // Chrome
            {
                $(this).attr('autocomplete', 'off');
                $(this).css('webkitUserModify', 'read');
                $(this).keydown(function() { return false; });
            }
            else if ( $.browser.msie ) // IE
            {
                $(this).keydown(function() { return false; });
            }
            else // Opera, etc.
            {
                $(this).mousedown(function() { return false; });
            }
        });
    };
</script>

这实际上会阻止用户输入数据（这是最初的问题集），然后在触发 keydown 事件时返回 false。

【讨论】：