阿猫故乡的博客

要实现当元素非法输入时获取焦点的功能，你可以使用以下代码：

HTML:

<input type="text" id="myInput">
<button onclick="checkInput()">Check</button>

JavaScript:

function checkInput() {
  var input = document.getElementById("myInput");
  var inputValue = input.value;

  // 检查输入是否合法，这里使用一个简单的示例检查是否输入了数字
  if (isNaN(inputValue)) {
    // 输入非法，设置输入框的样式或添加错误提示等
    input.style.border = "2px solid red";
    input.focus();
  } else {
    // 输入合法，重置输入框的样式
    input.style.border = "";
  }
}

在Antd的Input.Password组件中，可以通过设置 iconRender 属性来自定义密码显示的样式。可以通过使用CSS样式来设置密码的显示方式。

首先，在CSS样式中定义密码显示为星号（*）的样式：

.show-password {
  font-size: 14px;
  line-height: 1.5715;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

在React组件中引入样式，并将iconRender设置为一个函数，用来渲染自定义的图标。

import React, { useState } from "react";
import { Input } from "antd";
import "./YourComponent.css";

const YourComponent: React.FC = () => {
  const [passwordVisible, setPasswordVisible] = useState(false);

  const handleTogglePassword = () => {
    setPasswordVisible(!passwordVisible);
  };

  const renderPasswordIcon = (visible: boolean) => {
    return (
      <span onClick={handleTogglePassword} className="show-password">
        {visible ? "*" : "●"}
      </span>
    );
  };

  return (
    <Input.Password
      iconRender={(visible) => renderPasswordIcon(visible)}
    />
  );
};

export default YourComponent;