react-component / input

React Input Component

rc-input ⌨️

Install

Usage

import Input from 'rc-input';
import { render } from 'react-dom';

render(<Input placeholder="input" allowClear />, mountNode);

API

Property	Type	Default	Description
prefixCls	string	rc-input
className	string	''	additional class name of input
style	React.CSSProperties		style properties of input
affixWrapperClassName	string	-	className with 'rc-input-affix-wrapper'
groupClassName	string	-	className with 'rc-input-group-wrapper'
wrapperClassName	string	-	className with 'rc-input-wrapper'
addonAfter	ReactNode	-	The label text displayed after (on the right side of) the input field
addonBefore	ReactNode	-	The label text displayed before (on the left side of) the input field
allowClear	boolean | { clearIcon: ReactNode }	false	If allow to remove input content with clear icon
bordered	boolean	true	Whether has border style
defaultValue	string	-	The initial input content
disabled	boolean	false	Whether the input is disabled
id	string	-	The ID for input
maxLength	number	-	The max length
showCount	boolean | { formatter: ({ value: string, count: number, maxLength?: number }) => ReactNode }	false	Whether show text count
prefix	ReactNode	-	The prefix icon for the Input
suffix	ReactNode	-	The suffix icon for the Input
type	string	text	The type of input, see: MDN( use Input.TextArea instead of type="textarea")
value	string	-	The input content value
onChange	function(e)	-	Callback when user input
onPressEnter	function(e)	-	The callback function that is triggered when Enter key is pressed

inputRef

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();// the input will get focus
  inputRef.current.blur();// the input will lose focus
  console.log(inputRef.current.input);// The origin input element
}, []);
// ....
<Input ref={inputRef} />

Property	Type	Description
focus	(options?: InputFocusOptions) => void	The input get focus when called
blur	() => void	The input loses focus when called
input	HTMLInputElement | null	The origin input element

Development

npm install
npm start

License

rc-input is released under the MIT license.

input's Issues

Publish the package

When will publish this as Package :) ?

可以支持复制功能吗

复制文案是很常见和必须的能力。

关于输入框会自动得到焦点的问题

当鼠标处于点击态时，将鼠标移动到输入框，此时输入框会自动得到焦点。这个是否支持关闭，或者有其他的方案处理。谢谢 🙏

Why isn't `inputClassName` prop in the document?

input/src/Input.tsx

Line 144 in a53aa2c

inputClassName,

Did you forget to add it? If it is, I can give a PR.

Click clear icon will set value to empty string

  const handleReset = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
    setValue('');
    focus();
    if (inputRef.current) {
      resolveOnChange(inputRef.current, e, onChange);
    }
  };

Empty string is diffrent between undefined when it's sent to server.

Clear button is not accessible

Hello, we discovered that clear button which appears when allowClear property used is not accessible due to 2 reasons:

• button wrapper uses tabindex=-1 which makes it inaccessible through the keyboard using tab/shift+tab
• button wrapper uses span tag which prevent to click it via space or shift when it is on focus

I opened PR to fix this and added tests to check behavior, could you check it please

#63

handleReset应该将内容重置为undefined而不是空字符串

在最初没有内容输入时，值为undefined，所以重置后也应该是undefined

Add support for displaying remaining character count in rc-input

Currently, the rc-input package only provides support for displaying the character count of the provided input. It would be helpful to have the ability to switch to display the remaining character count also. This would be especially useful for situations where a user is limited to a specific number of characters, such as in form inputs or text areas.

I am requesting that support for displaying the remaining character count be added to the rc-input package. This would be a valuable addition to the package.

Thank you for considering this feature request.

selectionStart / selectionEnd are always 0

After this change (most likely) #54, which came into effect with antd 5.12.3, onchange event from the input always has selectionStart / selectionEnd properties set to 0 instead of the actual numbers

We have custom input processing (related to the currency formatting), which worked perfectly for the past 6 years until this change.

Would it be possible to have a look into this issue?

Failed to set the 'selectionStart' property on 'HTMLInputElement': The input element's type ('email') does not support selection.

Recent change v1.4.3...v1.4.4#diff-94b5cf5856a42bc2e70f9e2b690fda2b65151186e6b007466ff6c6744c40e2c8R30

currentTarget.selectionStart = target.selectionStart; currentTarget.selectionEnd = target.selectionEnd;

breaks input type email functionality. With error:

Failed to set the 'selectionStart' property on 'HTMLInputElement': The input element's type ('email') does not support selection.

在 Mac 系统上使用中文输入法时，onPressEnter 是否存在问题？

公司项目使用了 Antd，而 Antd 依赖了 rc-input 的代码。通过查看源码后发现 onPressEnter 使用了 onkeydown 实现检查是否按下 Enter，但这种实现会导致在 Mac 系统上使用中文输入法的情况下，输入任意内容不选择任何联想项时按下 Enter 键，会触发对应逻辑，正常情况下应该不做处理？个人尝试后发现使用 onkeypress 是没有问题的。

这是我写的 最小复现 Demo，如果使用非 onkeypress 的方式捕获，则会触发此问题，Windows 貌似没有出现此问题。

rc-input 的最小复现

123123.mp4

输入框有 emoji 表情，字数计算不对

😊 长度被计算为了 1 ，应该是 2

Input password don't show value in dom

ant-design/ant-design#20544

TextArea: e.target.setSelectionRange not work

Fork ant-design/ant-design#49016

测试地址：https://stackblitz.com/edit/react-evcore-ehnv3q?file=demo.tsx