Question

我希望有一个输入类型的文本框，我可以在输入时观察用户的输入，并在文本框下方的列表框中提供他/她的建议。当用户通过单击选择该输入时，该文本必须附加在主文本框中。到目前为止，我已经实现了编写代码来观察输入（通过使用onchange javascript事件）并在列表框上提供建议。但我不明白如何在主文本框中添加具有不同字体属性的选定建议。它可以实现吗？任何提示或插件细节最受欢迎。

添加示例代码。我希望它能简要说明我想要实现的目标。

<script>
    function changeValue(){
        var myval = document.getElementById("mytextbox").value;
        var newval = "green text";
        document.getElementById("mytextbox").value = myval + newval.fontcolor("green")";
    }
</script>

<input type="textbox" id="mytextbox" value="small text " />
<input type="button" value="click me" onclick="changeValue()">

单击按钮时，文本框中的文本应附加绿色文本和绿色。但它只是在文本框中显示为

"small text <font color="green">green text</font>"

希望这是可以实现的。

Answer 1

如果我正确理解，你想要某种自动完成，对吧？

我认为jQuery UI可以帮助您实现这一目标。检查此链接：

http://jqueryui.com/autocomplete/

问候！

Answer 2

设置value的{{1}}样式是一个全有或全无的命题。你无法独立于其余部分设计部分风格。

解决方法是避免使用textbox元素，而是使用textbox来包含建议的文本。您可以使用.innerHTML属性（或jQuery中的.html()函数）更新div内的HTML，包括您喜欢的任何div元素或内联样式。

类似的东西：

span

如果您还想对<script> function changeValue(){ var myval = document.getElementById("mytextbox").innerHTML; var newval = "green text"; document.getElementById("mytextbox").innerHTML = myval + newval.fontcolor("green"); } </script> <div id="mytextbox"/>small text</div> <input type="button" value="click me" onclick="changeValue()">的内容执行某些操作（例如将其作为表单的一部分提交），则必须编写一些JS以便稍后（或同时）验证和传输数据进入适当的（可能是隐藏的）表单字段或AJAX数据结构。

单个文本框元素中的多个字体属性

2 个答案: