Question

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

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

创建css样式文件
将TextBox的文本属性设置为html。
设置类似<span class="first_letter_style">S</span>ome text

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

我也试过了textBox.getElement.getInnerHTML（），为了复制它并稍微改动setInnerHTML()但我在调试模式下看到JavaScriptObject没有getInnerHTML()方法。奇怪的消息 - 我期望Element不是JavaScriptObject。

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

其他想法是使用ContentPanel创建InlineHTML并简单地使用span标记，但这种方法有一个很大的缺点 - 我不知道make DIV + Label如何表现为TextBox - cursor显示，突出显示选择，双击选择和其他事项。

更新：实际上我不仅要跨越第一个元素，还要跨越每个第三个字母。我找到了一些有趣的东西in other stackoverflow answer to similar question，但我不明白。此外，我不应该使用JQuery，我无法理解回答者的意思

“创建其他容器并用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);
    }

}

使用退格键，家庭和终端工作没问题。您可能需要调整样式。这是它的外观：

textbox_showing_html

如何将CSS样式设置为GWT TextBox文本？

1 个答案: