自定义 TextInput 组件失去焦点但仍包含光标?

发布于 2024-12-12 09:17:02 字数 725 浏览 0 评论 0原文

我有一个自定义的 TextInput 来监听 FocusEvent.FOCUS_IN 和 FocusEvent.FOCUS_OUT 事件:

textDisplay.addEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
textDisplay.addEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);

我的 onFocusInHandler 函数基本上删除告诉用户输入值的“promptview”,而 onFocusOutHandler 则执行相反的操作。

例如,如果 TextInput 文本退格为空白值,并且用户在 TextInput 框中单击,则 TextInput 中将显示“请输入值”浅灰色提示。

在用户单击我们自定义的“清除”按钮之前,这一切正常。清除按钮将文本设置为“”,我可以知道已收到 FocusEvent.FOCUS_OUT ,因为提示文本已设置为可见(未在其他任何地方设置)。问题是,光标保留在框中,就好像它仍然具有焦点一样,因此如果用户立即开始输入,提示文本“请输入一个值”都会出现在用户输入的文本上灰色的文字,看起来非常丑陋且难以阅读。

如果 TextInput 实际上没有失去焦点,为什么它会收到 FocusEvent.FOCUS_OUT 事件?有什么办法可以解决这个问题吗?

I have a custom TextInput that listens for the FocusEvent.FOCUS_IN and FocusEvent.FOCUS_OUT events:

textDisplay.addEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
textDisplay.addEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);

My onFocusInHandler function basically removes a "promptview" that tells the user to type in a value, with the onFocusOutHandler doing the opposite.

For example, if the TextInput text was backspaced to a blank value and the user clicks out of the TextInput box, it would show a "Please enter a value" light-gray prompt in the TextInput.

This works fine until the user clicks our custom "Clear" button. The clear button sets the text to "", and I can tell the FocusEvent.FOCUS_OUT is received because the prompt text is set to visible (its not being set anywhere else). The problem is, the cursor remains in the box as if it still has focus, so if the user immediately starts typing, both the prompt text "Please enter a value" and the user-entered text appears over the gray text, which looks pretty ugly and unreadable.

Why does the TextInput receive the FocusEvent.FOCUS_OUT event if it's not actually losing focus? Is there any way I can get around this?

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

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

发布评论

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

评论(1

無處可尋 2024-12-19 09:17:02

选项 1. 使用 Flex 4.1 或 4.5 中的 Spak TextInput。这已经默认提供了一个提示显示(如评论中所述)

选项2.看看焦点皮肤。此类皮肤通常置于正常皮肤之上。这两者之间可能存在一些焦点模糊性。尝试使用没有文本显示和清除按钮的自定义焦点皮肤。

选项3.不仅使用焦点事件来显示或隐藏提示,还查看TextInput的内容。当通过绑定设置文本时,您也不希望显示提示。

Option 1. Use the Spak TextInput in Flex 4.1 or 4.5. This already provides a promptDisplay by default (as mentioned in the comments)

Option 2. Take a look at the focus-skin. This skin class is usually placed on top of the normal skin. There could exist some focus ambiguity between these two. Try using a custom focus-skin without a textDisplay and clear button.

Option 3. Not only use a focus event to show or hide the prompt, but also look at the content of the TextInput. You don't want to display a prompt when the text is set by binding as wel.

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