Question

我试过搜索，但还没有找到答案。我看到当你在stackoverflow上提问时，“标签”的输入字段显示灰色文本“至少有一个标签，如......等”。单击后，灰色文本消失，您可以开始键入您的值。如果我点击它，说明再次出现。我怎么做？是否有此功能的开箱即用实现，还是需要自定义实现？

谢谢！

Answer 1

这是输入字段上的模糊/焦点javascript事件处理程序。在jQuery中，它将类似于以下内容：

<强> HTML

<input type="text" name="your-input" id="your-input" title="Enter a value"/>

<强>的jQuery

$('#your-input').focus(function(){
    var defaultVal = $(this).attr('title');
    if($(this).val() == defaultVal)
        $(this).val('');
});
$('#your-input').blur(function(){
    var defaultVal = $(this).attr('title');
    if($(this).val() == '')
        $(this).val(defaultVal);
});
$('#your-input').trigger('blur');

它取输入的title属性的默认值，并根据输入的当前值设置焦点和模糊事件的值。最后一次trigger()调用是在页面加载时正确设置输入的值。

你可以看到它in action here。

Answer 2

我想到了两个提供此功能的JSF组件库：

Answer 3

最简单的例子是

window.onload = function() {
    var txtField = document.getElementById('textField');

    if(!txtField.value) {
        txtField.value = 'Default Text';
    }
}


<h:inputText id="txtField" value="#{bean.txtField}" 
    onfocus="window.default=this.value; this.value='';"
    onblur="if(!this.value) { this.value = window.default; }"/>

在任何情况下，我都建议将window.onload切换到任何dom ready函数，例如

document.observe('dom:loaded', function(){}); // Prototype
$(document).ready(function(){}); // jQuery

JSF：带输入文本字段的预填充值？

3 个答案: