Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input 输入框输入表情时,长度计算错误 #7771

Closed
1 task
hekang456 opened this issue Aug 6, 2024 · 6 comments
Closed
1 task

Input 输入框输入表情时,长度计算错误 #7771

hekang456 opened this issue Aug 6, 2024 · 6 comments
Labels

Comments

@hekang456
Copy link

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

any

Reproduction link

https://github.com/vueComponent/ant-design-vue

Steps to reproduce

在Input中输入表情😊的时候,长度计算会和实际输入的字符个数不一样。比如限制20个字符,输入10个表情后就不可以输入了。

What is expected?

表情能输入的个数比预期少一半

What is actually happening?

表情能正确计数。


function fixControlledValue(value: string | number) {
if (typeof value === 'undefined' || value === null) {
return '';
}
return String(value);
}
这里,'😊' 是一个字符串,包含一个笑脸表情符号。fixControlledValue('😊') 将返回这个字符串本身,因为 '😊' 已经是一个字符串了。然后,[...string] 会将字符串转换为一个字符数组(在这个上下文中,😊 被视为一个单一的字符,尽管它实际上可能由多个 Unicode 码点组成,但在 JavaScript 的字符串迭代中,它通常被视为一个单一的“字符”)。因此,.length 将返回 1,因为数组中只有一个元素(即那个笑脸表情符号)。

@cc-hearts
Copy link
Contributor

'😊'.length // result is 2

🤔 不过可以提供 function 的方式自定义

@cc-hearts
Copy link
Contributor

原来已经提供了 formatter 的方式,我完善了一下文档。
数据类型如下:

interface Props {
  showCount: { formatter: (info: { value: string, count: number, maxlength?: number }) => VNode }
}

@hekang456
Copy link
Author

因为textarea把表情当一个字符,这个也更加符合直觉,所以使用formatter 计算长度可能不太合适,因为一个表情会显示长度为2。我按照textarea的方法,对vc-input进行了处理,pr是https://github.com/vueComponent/ant-design-vue/pull/7782,请您看一下。

@cc-hearts
Copy link
Contributor

cc-hearts commented Aug 12, 2024

感谢提醒, emoji的 length 判断是很复杂的

[...'🧑‍🌾'].length

// ['🧑', '‍', '🌾']

image

所以不能使用 [...emojiStr].length 的方式判断。

框架无法 case 所有的字符串计算情况,因此框架的默认 length 取值应该保持简单的逻辑判断, 并且通过 formatterfunction 方式提供用户自行判断 length

@hekang456
Copy link
Author

的确是这样,如果是双字符的表情,textarea 还是可以正常展示的,但是更多字符的表情,就会产生错误。所以这个计算长度还是不太行
image

Copy link

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants