用 jQuery 填充空输入

Question

我正在使用 PHP+MySQL。在一个页面中，我有一个带有 aprox 的表格。 30 个输入。

显示表单后，最后我执行一些 jQuery 语句来设置表单的样式。

好吧，我的 SQL 中的某些行有数据空输入，所以我显示空输入。我想用“------”填写表格而不将斜杠写入数据库，因为这会使 SQL 变得更大。

我正在尝试“replaceWith”，但我不知道这个带有“empty”的实现是否正确。 这不起作用，即使没有 .is(:empty)

<script>
    $('#form').find('input[type=text]').is(':empty').replaceWith(function()
       {
        return this.val('------');
       });
</script>

Answer 1

jQuery 的:empty 查找没有子元素的元素，而不是没有值的元素，并且作为输入不能有子元素，它什么也找不到。

jQuery 的 is() 返回一个布尔值，而不是一个集合。

jQuery 的replaceWith 替换整个元素，而不仅仅是值。

改为检查值。

$('#form input[type=text]').val(function(_, val) {
    return val.length === 0 ? '------' : val;
});

或

$('#form input[type=text]').filter(function() {
    return this.value.length === 0;
}).val('------');

如果需要，请输入 $.trim 以删除空格

Answer 2

使用这样的东西：

<script>
    $('#form').find('input[type=text]').each(function(e){
        if($(this).val()=="") $(this).val("---");
    })       
</script>

Answer 3

您是否考虑过使用 HTML placeholder 属性？

您可以使用placeholder 使破折号以浅灰色文本显示，而无需实际更改输入值。它们会自动添加到您页面上的任何空白字段中：

<input type="text" placeholder="----" value="asdf" name="notempty"
    title="This has a placeholder, but doesn't show it because the input is filled with something" />
<input type="text" placeholder="----" value="" name="empty"
    title="This is empty, so it shows the dashes" />

占位符文本不会包含在您的 $_POST 数据中。在此示例中，$_POST['empty'] 将为空白。

许多现代浏览器都支持placeholder 属性，但IE9 不支持：

http://caniuse.com/#feat=input-placeholder

也有各种 jQuery 插件可以模仿这种效果。您可以在这里阅读其中的一些内容：

How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?