ColorPicker 文本输入字段在粘贴时截断值

ColorPicker text input field truncates the value on paste

当粘贴到 ColorPicker 文本字段时,颜色值有时会被截断。

例如,如果我粘贴 #0000FF,则文本字段显示 #0000F

如果我关闭颜色选择器然后再次打开它并再次粘贴它会显示 #0000FF

我开始尝试修复它,然后我在 SwatchPanel 的 textInput 更改处理程序中找到了这段代码 class:

private function textInput_changeHandler(event:Event):void
{
    // Handle events from hex TextField.
    var color:String = ITextInput(event.target).text;
    if (color.charAt(0) == "#")
    {
        textInput.maxChars = 7;
        color = "0x"+color.substring(1);
    }
    else if (color.substring(0,2) == "0x")
    {
        textInput.maxChars = 8;
    }
    else
    {
        textInput.maxChars = 6;
        color = "0x"+color;
    }

    highlight.visible = false;
    isOverGrid = false;
    selectedColor = Number(color);

    dispatchEvent(new Event("change"));   
}

看起来 RichEditableText 在更改事件有机会更新 maxChars 值之前截断了值。来自 RichEditableText:

if (maxChars != 0)
{
    var length1:int = text.length - delLen;
    var length2:int = textToInsert.length;
    // it is truncated from "#0000FF" to "#0000F" here
    if (length1 + length2 > maxChars)
        textToInsert = textToInsert.substr(0, maxChars - length1);
}

因此看起来在 SwatchPanel 中更改事件 textInput_changeHandler 来不及将 maxChars 属性 更改为不截断粘贴的值。有没有关于如何解决这个问题的建议?

完整示例代码:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">

<mx:ColorPicker id="colorPicker" 
                horizontalCenter="0"
                verticalCenter="0"
                paste="trace('pasted')" 
                valueCommit="colorPicker_valueCommitHandler(event)" 
       creationComplete="colorpicker1_creationCompleteHandler(event)"/>


    <fx:Script>
        <![CDATA[
protected function colorpicker1_creationCompleteHandler(event:FlexEvent):void {
    var textinput:ITextInput;

    if (colorPicker.dropdown==null) {
        var swatch:SwatchPanel = colorPicker.getDropdown();
        textinput = swatch.textInput;
    }
    else {
        textinput = colorPicker.getDropdown().textInput;
    }

    IEventDispatcher(textinput).addEventListener("paste", pasteincolorpicker);

    IEventDispatcher(textinput).addEventListener("change", pasteincolorpicker);
    IEventDispatcher(textinput).addEventListener("changing", pasteincolorpicker);
    IEventDispatcher(textinput).addEventListener("valueCommit", pasteincolorpicker);
}
private function pasteincolorpicker(event:Event):void
{
    trace("event.type: " + event.type);
    if (event.type=="changing") {
        event.currentTarget.maxChars = 7;
    }
    var text:String = "";
    if (event is TextOperationEvent) {
        text = TextOperationEvent(event).operation.textFlow.getText();
    }
    trace("pasting: " + text);
}


protected function colorPicker_valueCommitHandler(event:FlexEvent):void
{
    trace("value commit: ");    
}

]]>
</fx:Script>
</s:WindowedApplication>

这似乎是在您的 Flex 项目的 mx 组件中使用 FTE 时发生的。下面是修复此问题的扩展 ColorPicker。当未检查 mx 组件中的 FTE(在一个项目上测试)时,这似乎不起作用。

use namespace mx_internal;

public class ColorPicker extends mx.controls.ColorPicker
{
    public function ColorPicker()
    {
        super();
    }


    override protected function createChildren():void
    {
        super.createChildren();

        var swatch:SwatchPanel = getDropdown();
        if (!swatch.textInput.hasEventListener(FlexEvent.CHANGING)) {
            swatch.textInput.addEventListener(FlexEvent.CHANGING, changingEventHandler);
        }
    }

    protected function changingEventHandler(event:Event):void
    {
        // set it to max characters of 8
        // allow room for "123456", "#234567", "0x345678" before paste truncates it
        // change event handler in SwatchPanel will set it back to 8, 7 or 6 max chars
        if (event is TextOperationEvent) {
            dropdown.textInput.maxChars = 8;
            //text = TextOperationEvent(event).operation.textFlow.getText();
            //trace("changing to: " + text);
        }
    }
}