Question

我正在关注官方Java Form Helpers文档来编写自己的字段构造函数。我还借鉴了Play中包含的computer-database示例应用程序。

computer-database示例应用程序中包含的输入控件的模板如下所示：

<div class="clearfix @if(elements.hasErrors) {error}">
  <label for="@elements.id">@elements.label</label>
  <div class="input">
      @elements.input
      <span class="help-inline">@elements.infos.mkString(", ")</span> 
  </div>
</div>

从这个例子中，很明显如何在<input>元素周围添加其他元素。我的问题是我想改变<input ...>元素本身的一部分。

我无法看到如何执行此操作，因为@elements.input呈现完整的<input type="..." value="..." ...> HTML元素，因此我没有机会向input元素添加其他属性。

我想要做的是添加placeholder="my placeholder text"。我想从elements.args获取占位符文本。

我已经能够通过@elements.input.buffer上的字符串操作实现我想要的目标，如下所示：

@(elements: helper.FieldElements)
@{
  val buffer = elements.input.buffer;

  val index = buffer.lastIndexOf(">");     // find the closing '>'
  buffer.delete(index, buffer.length - 1); // delete it

  buffer ++= " placeholder=\""             // insert the placeholder attribute
  buffer ++= elements.args('placeholder).toString 
  buffer ++= "\">"                         // close the input tag

  Html(buffer.toString)                    // render as HTML
}

我的问题是：有更简单的方法吗？它有一个设施已经内置到Play？或者这是我调整input字段本身的唯一途径吗？

Answer 1

它已内置并将与您的自定义字段构造函数一起使用。它实际上是在渲染＆lt; input＆gt;下记录的。您链接到的页面上的元素。

注意：所有额外参数都将添加到生成的HTML中，但名称以_字符开头的参数除外。以下划线开头的参数保留给字段构造函数参数（稍后我们将看到）。

所以做这样的事情：

@inputText(
  myForm("user"),
  '_label -> "User",
  'size -> 30,
  'placeholder -> "User Name"
)

将输出这样的HTML：

<input id="user" name="user" size="30" placeholder="User Name">

它已在某处记录，但如果你想要data属性，那么你必须这样做：

@inputText(
   ...
   Symbol("data-some-attribute") -> "value"
)

Answer 2

我有类似的情况，我需要在字段构造函数中添加class属性以应用于所有字段

     @inputText(engineForm("accessLevel"), '_label -> "access Level", 'class->"form-control")
@inputText(engineForm("logoURL"), '_label -> "Channel Logo", 'class->"form-control")

如您所见，我必须为每个字段定义添加类属性我在字段构造函数中做了什么：

  @(elements: helper.FieldElements)

                    <div class="form-group">
                            <label for="@elements.id" class="control-label col-lg-4">@elements.label</label>
                            <div class="col-lg-3">
                            @Html(elements.input.body.dropRight(2)+"class='form-control'>")

                    </div>
                  </div>

这将使您避免将class属性添加到每个字段

使用自定义字段构造函数时，将HTML属性添加到输入组件

2 个答案: