如何使用 Lift(Scala 框架)将焦点集中在文本框上?

发布于 2024-09-26 02:43:36 字数 656 浏览 3 评论 0原文

请原谅我的问题极其简单,但我对 Lift(以及 Scala)的世界还很陌生。

我正在按照 Lift 网站上的“入门”教程进行操作:http://liftweb.net/getting_started

我已经启动并运行,但我想对应用程序进行快速修改,以便每次我在文本框中按 Enter 时,它都能保持焦点。我已经设法使用 FocusOnLoad 让它专注于页面加载,但我不太清楚如何让它保持焦点(仅使用 Lift 的类,没有自定义 JavaScript)。

这是我的 def render 方法(绑定部分)代码的样子:

def render =
    bind("chat", // the namespace for binding
    "line" -> lines _, // bind the function lines
    "input" -> FocusOnLoad(SHtml.text("", s => ChatServer ! s)) )

这样可以让它专注于页面加载。但由于这是 Comet 应用程序,因此页面仅加载一次。

我的所有其他代码看起来与教程 FWIW 完全相同。

Pardon my excruciatingly simple question, but I'm quite new to the world of Lift (and Scala, for that matter).

I'm following the "Getting Started" tutorial on the Lift website: http://liftweb.net/getting_started

I've got it up and running but I'd like to make a quick modification to the app so that every time I press enter in the textbox, it maintains focus. I've managed to get it to focus on page load using FocusOnLoad but I can't quite figure out how to get it to keep focus (using only Lift's classes, no custom JavaScript).

Here's what my def render method (the bind part) code looks like:

def render =
    bind("chat", // the namespace for binding
    "line" -> lines _, // bind the function lines
    "input" -> FocusOnLoad(SHtml.text("", s => ChatServer ! s)) )

So that works for getting it to focus upon page load. But since this is a Comet app, the page only loads once.

All my other code looks exactly like the tutorial FWIW.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

呢古 2024-10-03 02:43:36

CometActor 中的 render 方法仅在 CometActor 首次初始化时才会被调用,这会在用户第一次进入聊天页面时发生。之后,页面更新通常发生在 lowPriorityhighPriority 方法内部。因此,如果您希望文本框在用户向 CometActor 发送 AJAX 更新后获得焦点,您应该将其添加到这些方法之一。使用 JQuery 的一个例子是这样的:

override def lowPriority = {
  case m: List[ChatCmd] => {
    val delta = m diff msgs
    msgs = m
    updateDeltas(delta)
    partialUpdate((JqJE.Jq(JE.Str("input[type=text]")) ~> (new JsRaw("focus()") with JsMember)).toJsCmd)
  }
}

我还没有尝试编译它,所以它可能需要一些轻微的调整。本质上,它只是向浏览器发送另一个 JavaScript 命令,该命令使用 JQuery 查找页面上的文本输入,然后将焦点设置在该控件上。如果有多个文本输入,则需要修改 HTML 模板上要设置焦点的控件的类,然后确保将渲染方法更改为:

def render = 
  bind("chat",
       "line" -> lines _,
       "input" -%> FocusOnLoad(SHtml.text("", s => ChatServer ! s)) )

-%>< /code> 方法指示 Lift 在绑定阶段不要忽略模板中的任何属性。然后,您可以修改 JQuery 选择器以使用该类来查找要关注的正确控件。 Lift 中的部分表单安全性会隐藏分配给表单及其控件的 ID,以防止 XSS 攻击,因此通常最好使用类选择器来使用 JQuery 或其他一些 Javascript 框架查找表单控件。

The render method in a CometActor only gets called when the CometActor is first initialized, which happens when the user first goes to the Chat page. Afterwards, the page updates usually happen inside of the lowPriority or highPriority methods. So if you want the text box to become focused after the user sends an AJAX update to the CometActor, you should add it to one of those methods. An example which uses JQuery would be this:

override def lowPriority = {
  case m: List[ChatCmd] => {
    val delta = m diff msgs
    msgs = m
    updateDeltas(delta)
    partialUpdate((JqJE.Jq(JE.Str("input[type=text]")) ~> (new JsRaw("focus()") with JsMember)).toJsCmd)
  }
}

I haven't tried compiling this, so it might need some slight tweaking. Essentially, it's just sending another JavaScript command to the browser that uses JQuery to find a text input on the page and then sets the focus on that control. If there are multiple text inputs, you'll need to modify the class on the HTML template for the control you want to set focus on, then make sure that you change your render method to be:

def render = 
  bind("chat",
       "line" -> lines _,
       "input" -%> FocusOnLoad(SHtml.text("", s => ChatServer ! s)) )

The -%> method instructs Lift to not ignore any attributes in the template during the bind phase. Then you can modify the JQuery selector to use that class to find the right control to focus on. Part of the form security in Lift obscures the ID assigned to forms and their controls to prevent XSS attacks, so it's generally better to use class selectors to find form controls using JQuery or some other Javascript framework.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文