如何防止 TextField 中的向上/向下箭头默认行为? [英] How do you prevent arrow up/down default behaviour in a TextField?

问题描述

我正在为关键字制作一个输入字段，当用户写作时，我正在插入符号位置下方的列表中显示关键字建议.输入字段是单行，因此我使用向上/向下箭头键选择建议并按 Enter 将其插入.它主要是有效的，除了向上/向下键还将插入符号位置更改为 TextField 的开始/结束的一个很大的例外.

I am making a input field for keywords, and while the users writing I'm displaying suggestions for keyword on a list underneath the caret position. The input field is single line, so I am using the arrow up/down key to select a suggestion and Enter to insert it. And it's mostly working, with the big exception that the up/down key also changes the caret position to the begining/ending of the TextField.

我尝试在 KeyboardEvent.KEY_DOWN 事件侦听器中使用 preventDefault() 和 stopImmediatePropagation()，我也用它们来更改选定的建议，但这不会改变任何内容.当 KeyboardEvent.KEY_DOWN 事件被触发时，我检查了插入符号尚未移动，但在视觉上我可以看到它在释放键(键向上)之前正在移动.

I've tried using preventDefault() and stopImmediatePropagation() in the KeyboardEvent.KEY_DOWN event listener that I also use to change the selected suggestion, but that does not change anything. I checked the carret has not yet moved when KeyboardEvent.KEY_DOWN event is fired, bu visually I can see that it is being move before key is released (key up).

我可以只保存插入符号位置，然后重置默认行为.但这会适当地涉及一些使用计时器的类似黑客的代码.

I could just save the caret position, and then reset af the default behaviour. But that would properly involve some hack-like code using a timer.

那么有谁知道如何防止默认行为?

So does anyone know how to prevent the default behaviour?

推荐答案

你不能阻止它，但你可以逆转它.为此，您将具有不同优先级的处理程序添加到同一事件 - KeyboardEvent.DOWN.一个将在 TextField 的 之前执行，并保存选择索引，另一个在之后，恢复它们.工作代码如下:

You can't prevent it, but you can reverse it. To do that you add to handlers with different priorities to the same event - KeyboardEvent.DOWN. One will execute before the TextField's , and save selection indexes and the other after, restoring them. Working code follows:

    import flash.events.Event;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;

    import mx.controls.TextInput;
    import mx.events.FlexEvent;

    public class FooledTextInput extends TextInput
    {
        private var ssi : int = 0;
        private var sei : int = 0;

        public function FooledTextInput()
        {
            super();

            this.addEventListener(KeyboardEvent.KEY_DOWN, onBeforeKeyDown, false, 10000);
            this.addEventListener(KeyboardEvent.KEY_DOWN, onAfterKeyDown, false, -10000);
        }

        private function onBeforeKeyDown(e : KeyboardEvent) : void
        {
            if (e.keyCode == Keyboard.UP || e.keyCode == Keyboard.DOWN)
            {
                ssi = this.selectionBeginIndex;
                sei = this.selectionEndIndex;
            }   
        } 

        private function onAfterKeyDown(e : KeyboardEvent) : void
        {
            if (e.keyCode == Keyboard.UP || e.keyCode == Keyboard.DOWN)
            {
                this.setSelection(ssi, sei);
            }   
        } 
    }

您可能想要更好的 ssi(选择开始索引)和 sei(选择结束索引)名称，我懒得找了.我认为这个解决方案是基于 Alex Harui 的一篇文章，我记不清了，但他的博客上有很多很好的 Flex 相关内容.

You might want better names for ssi (selection start index) and sei (selection end index), I was to lazy to find some. I think this solution was based on a post of Alex Harui, I don't remember exactly, but he's got a lot of good Flex related stuff on his blog.

更新: 对于 spark TextInput，防止不仅是可能的，而且非常容易.您需要做的就是在捕获阶段捕获事件并停止传播.代码:

UPDATE: For the spark TextInput, preventing is not only possible, it is really easy. All you need to do is catch the event in the capture phase and stopping propagation. Code:

package
{
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;

    import spark.components.TextInput;

    public class HackedTextInput extends TextInput
    {
        public function HackedTextInput()
        {
            super();
            addEventListener(KeyboardEvent.KEY_DOWN, onBeforeKeyDown, true);
        }

        private function onBeforeKeyDown(e:KeyboardEvent) : void
        {
            if (e.keyCode == Keyboard.UP || e.keyCode == Keyboard.DOWN)
            {
                e.stopImmediatePropagation();
            }   
        }  
    }
}

注意 addEventListener 调用中的最后一个参数，该参数设置为 true 以便在捕获阶段调用处理程序.遗憾的是，此解决方案不适用于 mx TextInput，仅适用于 spark.

Note the last parameter in the addEventListener call, which is set to true in order for the handler to be called in the capture phase. Sadly this solution doesn't work for the mx TextInput, only for the spark one.

这篇关于如何防止 TextField 中的向上/向下箭头默认行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！