如何在Play框架中隐藏文本字段

Question

如何在Play框架中隐藏文本字段？例如，如何隐藏此字段：

@inputText(userProfileForm("name"), '_label -> "Name")

- Prasanth A R

Answer 1

这应该在所有浏览器中都有效：

@inputText(
    userProfileForm("name"),
    '_label -> "Name",
    'style -> "display: none"
)

请注意，这只会隐藏字段本身，而不是标签等其他内容。

如果您想要隐藏标签，您无法使用默认的帮助程序来实现。不过您可以自己指定输入字段：

<input type="hidden" name="name" value="@userProfileForm.data.get("name")" />

name应该是你表单中字段的名称（在这种情况下，巧合的是也叫name）。
我没有测试过value，但应该可以正常工作，也许你需要去掉"周围的name。

如果你这样做，隐藏数据将和表单中的其他数据一起发送到服务器。

编辑：
如果隐藏的值为空，则表示在调用视图时没有将其绑定到表单。你可以像Java中这样将其绑定到表单中（我不知道Scala，但在 Play Scala文档中有解释）：

Map<String, String> data = new HashMap<>();
data.put("name","get the username here");

return ok(index.render(userProfileForm.bind(data));

我认为更干净的选项是将用户名作为参数传递给视图。控制器变为：

return ok(index.render(userProfileForm, "username goes here"));

然后在视图中，您可以这样做：

@(userProfileForm : Form[UserProfileForm])(name : String)

@helper.form(...){
    <input type="hidden" name="name" value="@name" />
    //...
}

- Aerus

---

@PrasanthAR 我更新了帖子，展示了一些代码，演示如何隐藏输入（和标签等），并仍然能够将隐藏数据发送到服务器。这是你想要的吗？ - Aerus

当然，我非常感激你，真的谢谢你... 今天我不能点赞，因为我的点赞次数已经用完了，我必须明天点赞回答... - Prasanth A R

@PrasanthAR 没问题，如果这个解决了你的问题，请不要忘记将答案标记为已接受 ;) ! - Aerus

@PrasanthAR，我现在已经测试了value="@userProfileForm.data.get("name")"，它可以正常工作。如果生成的HTML中的值为空，请检查我的答案中的编辑，这可能是导致问题的原因。 - Aerus

谢谢，这看起来不错。谢谢，我明白了。 - Prasanth A R

Answer 2

inputText助手接受(Symbol, Any)类型的可变参数，表示HTML属性。如果你使用的是HTML5，只需添加hidden属性即可：

@inputText(userProfileForm("name"), '_label -> "Name", 'hidden -> "hidden")

通常，hidden属性没有值，但是我找不到如何使用helpers实现此功能的任何信息。至少在Chrome中也可以按此方式工作。

编辑:

顺便说一句，你也可以使用HTML而不是helper：

<input attribute=value hidden />

- drexin

---

请问您能否发布一下这段代码生成的HTML呢？ - drexin

@inputText(userProfileForm("name"), '_label -> "姓名", 'hidden -> "hidden") 这段代码我使用了但是没有起作用。 - Prasanth A R

我是新手，对于这个不是很了解，真的很抱歉。以下是我的整个隐藏代码...在视图中...<div id="user_pic"> @inputText(userProfileForm("name"), '_label -> "名称", 'hidden -> "hidden")@inputText(userProfileForm("status"), '_label -> "状态")</fieldset><div class="actions"><input type="submit"> - Prasanth A R

当您在浏览器中加载页面时，请右键单击页面并单击“查看页面源代码”。输入框的代码是什么样子的？ - drexin

<input type="text" id="name" name="name" value="user4" hidden="hidden"> - Prasanth A R

<div class="clearfix " id="name_field"> <label for="name">名称</label> <div class="input">
<input type="text" id="name" name="name" value="user4" hidden="hidden"> <span class="help-inline"></span> <span class="help-block">必填项</span> </div></div> - Prasanth A R

Answer 3

我知道这是一个老问题，但我也遇到了类似的问题，我想隐藏一个inputText，但仍然使用helpers来处理它。 最好和最清洁的方法是编写自己的helper，并添加一个自定义值来告诉何时隐藏元素本身。 我得出了以下解决方案：

我的自定义字段构造器

@(elements: helper.FieldElements)
@if(elements.args.contains('hideIt)){
    @elements.input
}else{
<div class="@if(elements.hasErrors) {error}">
    <div class="input">
        @elements.input
        <span class="errors">@elements.errors.mkString(", ")</span>
        <span class="help">@elements.infos.mkString(", ")</span> 
    </div>
</div>
}

我在视图文件中这样使用它：

@inputText(form("fieldName"),
'hidden -> "true",
'hideIt -> true
)

现在你已经完成了 :)

- FrancescoM

Answer 4

虽然它可行，但我不喜欢@Aerus提供的哈希映射版本，更倾向于在可能的情况下使用静态类型形式，因此我想出了一种替代方案。

final UserProfileForm initial = new UserProfileForm("get the username here");
return ok(index.render(Form.form(UserProfileForm.class).fill(initial));

然后，在个人资料中，您可以按照以下步骤操作：

<input type="hidden" name="name" value="@userProfileForm("name").value" />

- kazagistar