java - 如何将 css 样式设置为 GWT TextBox 文本？

Question

我正在尝试实现我自己的 TextBox。

我的目标是添加以下功能:当用户键入文本时，首字母应以特殊方式设置样式。我想执行这些操作:

1. 创建CSS样式文件
2. 获取 TextBox 的文本属性作为 html。
3. 设置类似<span class="first_letter_style">S</span>ome text 的文本

我尝试执行 textBox.setText("some HTML")并且结果是可预测的——textBox 只是将 html 视为文本 =)

我还尝试了 textBox.getElement.getInnerHTML()，以便复制它并使用 setInnerHTML() 稍微更改一下。但我在 Debug模式下看到了JavaScriptObject没有 getInnerHTML()方法。奇怪的消息 - 我期望 Element 而不是 JavaScriptObject。

我的问题是 - 如何将文本设置为 GWT TextBox 并强制将其视为 HTML 而不是简单文本。我的意思是 html 标签应该有意义。

其他想法正在创造ContentPanel与 InlineHTML并简单地使用 span标记，但这种方法有一个很大的缺点 - 我不知道如何让 DIV+Label 表现得像 TextBox - 光标显示、突出显示选择、双击选择和其他事情。

更新:实际上我不仅需要跨越第一个元素，还需要跨越每个第三个字母。我发现了一些有趣的东西 in other stackoverflow answer to similar question但我不明白。我也不应该使用 JQuery我不明白回答者的意思是什么

"create other container and wrap each letter with span"

我认为创建其他容器不是个好主意 - 我应该在 textBox 中而不是在其他小部件中执行更改。

Answer 1

我不认为它可以通过简单的方式来完成，只需操作一个 TextBox。

让它工作的一种方法是创建一个 TextBox 并隐藏它的输出，同时从它复制文本，修改它以添加你想要的东西，并将它显示在一个 div 元素中。

您可能会遇到一些问题，因为某些功能会丢失，例如选择一段文本并将其删除。您可以通过处理适当的事件来重现它。

我创建了一个这样的示例小部件，请随意尝试:

public class HTMLBox extends FlowPanel{

    //this will be the text shown
    private HTML html = new HTML();

    //this will be our text box with the text hidden
    private TextBox textBox = new TextBox();

    private KeyUpHandler handler = new KeyUpHandler() {

        @Override
        public void onKeyUp(KeyUpEvent event) {
            String textToShow = decorateHtml(textBox.getText()); 
            html.setHTML(textToShow);
        }
    };

    private ClickHandler ch = new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            //makes clicking on the "html" element set focus on textBox, so that user can type
            textBox.getElement().focus();       
        }
    };

    //add any tags to the text
    //like make every third letter bold
    public String decorateHtml(String html) {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < html.length(); i++) {
            if (i%3 == 0) {
                sb.append("<span style='font-weight:bold;'>" + html.charAt(i) + "</span>");
            } else {
                sb.append(html.charAt(i));
            }
        }
        return sb.toString();
    }

    @Override
    public void onAttach() {
        super.onAttach();
        //height of html set to height of textBox -4
        html.getElement().getStyle().setHeight(textBox.getElement().getOffsetHeight()-4, Unit.PX);
        html.getElement().getStyle().setLeft(2.0, Unit.PX);
        html.getElement().getStyle().setBottom(2.0, Unit.PX);
    }

    public HTMLBox() {

        addDomHandler(ch, ClickEvent.getType());
        getElement().getStyle().setPosition(Position.RELATIVE);
        html.getElement().getStyle().setPosition(Position.ABSOLUTE);
        textBox.getElement().getStyle().setColor("transparent");
        textBox.addKeyUpHandler(handler);
        textBox.getElement();
        add(textBox);
        add(html);
    }

}

使用退格键、home 和 end 没问题。您可能需要调整样式。这是它的样子: