Javascript删除对Enter键按下的关注

Question

当我按下“enter”键时，如何移除任一输入框的焦点？

我有这个代码：

import React, { useState } from "react";

import "antd/dist/antd.css";
import { Form, Input, Button, Card } from "antd";

function Login() {
  const [loadings, setloadings] = useState(false);
  const [disabledLoading, setDisabledLoading] = useState(false);

  function changeloading() {
    setloadings(true);
    setDisabledLoading(true);
    setTimeout(() => {
      setloadings(false);
    }, 1630);
  }

  function passwordEnterPress(e) {
    e.target.blur();
  }

  return (
    <div>
      <Card className="home-card">
        <Form>
          <Form.Item name="Username">
            <Input name="username" onPressEnter={passwordEnterPress} />
          </Form.Item>
          <Form.Item name="Password">
            <Input.Password name="password" onPressEnter={passwordEnterPress} />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              onClick={() => changeloading()}
            >
              Log in
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Login;

Codesandbox

EDIT 根据文档 link，我可以调用 blur 函数来移除焦点，但我不知道如何在提交时触发该函数并定位输入字段。

如果我选择任一输入，它将被聚焦；但是，当我按下“enter”提交表单时，焦点不会消失。 我希望每当我按下提交表单的“enter”键时焦点消失。

值得一提的是，我不想强​​行覆盖焦点边框。我只希望当我单击登录按钮（已经在工作）或按“输入”键（这个问题的全部要点）时边框消失。

提前致谢。

Answer 1

为了在按下回车键时从输入中失去焦点，你应该处理 输入的key up事件，如下图

function handleKeyUp(event) {
 //key code for enter
 if (event.keyCode === 13) {
   event.preventDefault();
   event.target.blur();
 }
}

现在将此函数分配给输入框的 on key up 事件，如下所示

<Input name="username" onKeyUp={handleKeyUp} />

现在要清除表单提交上的输入焦点， 您可以创建对两个输入的引用，如下所示

let userNameRef = React.createRef();
let passwordRef = React.createRef();

将其分配给输入，如下所示

<Input ref={userNameRef} name="username" onKeyUp={handleKeyUp} />
 <Input.Password ref={passwordRef} name="password" />

随时使用这些参考来清除焦点

userNameRef.current.blur();
passwordRef.current.blur();

已编辑 两个字段上的 createref 与使用 handlekeyup 相比有什么区别？

两者的工作原理相同， 当事件触发时，event.target 是您的目标元素， 而 React 提供了使用 createRef 访问 dom 元素的方法， event.target 和 ref.current 没有太大区别 但最好使用参考作为使用参考，您可以访问 元素任何地方，无论是否发生事件

Answer 2

为了调用 blur 函数，您需要获取输入标记的实例，您可以使用 ref 或简单地调用由 and 给出的 onPressEnter 属性

            <Input.Password name="password" onPressEnter={passwordEnterPress} />

然后你可以写出所需的功能，比如模糊化

   function passwordEnterPress(e) {
     e.target.blur()
   }

抱歉，我的编辑技能很差，下面是您可以在代码沙箱中运行的代码。请注意您必须将鼠标移出输入框

import React, { useState } from "react";
import "antd/dist/antd.css";
import { Form, Input, Button, Card } from "antd";

function Login() {
  const [loadings, setloadings] = useState(false);
  const [disabledLoading, setDisabledLoading] = useState(false);
  function changeloading() {
    setloadings(true);
    setDisabledLoading(true);
    setTimeout(() => {
      setloadings(false);
    }, 1630);
  }

  function passwordEnterPress(e) {
    e.target.blur()
  }
  return (
    <div>
      <Card className="home-card">
        <Form>
          <Form.Item name="Username">
            <Input name="username" />
          </Form.Item>
          <Form.Item name="Password">
            <Input.Password name="password" onPressEnter={passwordEnterPress} />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              onClick={() => changeloading()}
            >
              Log in
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Login;

Answer 3

将此添加到您的表单中onSubmit

<Form
  onSubmitCapture={() => {
  if ("activeElement" in document) document.activeElement.blur();
  }}
>
...
</Form>

Answer 4

通过表单提交更新了答案。检查控制台中的日志。

import React, { useState, useRef } from "react";

import "antd/dist/antd.css";
import { Form, Input, Button, Card } from "antd";

function Login() {
  const [loadings, setloadings] = useState(false);
  const [disabledLoading, setDisabledLoading] = useState(false);
  const formRef = useRef()
  function changeloading() {
    setloadings(true);
    setDisabledLoading(true);
    setTimeout(() => {
      setloadings(false);
    }, 1630);
  }

  function onFinish(values) {
    console.log(values)
  }
  function passwordEnterPress(e) {
    e.target.blur() 
    formRef.current.submit()
  }
  return (
    <div>
      <Card className="home-card">
        <Form ref={formRef} onFinish={onFinish}>
          <Form.Item name="Username">
            <Input name="username" />
          </Form.Item>
          <Form.Item name="Password">
            <Input.Password name="password" onPressEnter={passwordEnterPress} />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              onClick={() => changeloading()}
            >
              Log in
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Login;