Multiple font attributes within a single textbox element

Question

I want to have one input type textbox where I can observe the user's input while typing and provide him/her suggestion in listbox below the textbox. When user chooses that input by clicking on it, that text must be appended in main textbox. So far I achieved to write code to observe the typing (by using onchange javascript event) and provide suggestion on listbox. But I dont understand how to add the selected suggestion in main textbox with different font attributes. Is it achievable? any hint or plugin details most welcome.

adding the sample code. I hope it will give brief idea what I want to achieve.

<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()">

When button is clicked, the text in textbox should have appended green text and in green color. But it just shows on textbox as

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

Hope so it is achievable.

This question would be better if it included a sample of what you have so far. If you provide one we'll try to help further. That said, you probably want to use the [`.html()`](http://api.jquery.com/html/) function to set the contents of whatever element is your main textbox. You can then style that as you wish. You essentially want to be doing what's discussed here: http://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery — StvnW, Apr 23 '14 at 17:27
Can you share you code with us? That will help us to help you. — Jay Blanchard, Apr 23 '14 at 17:28
And is it your intention to use jQuery or to avoid jQuery? (I ask because you tagged the question with jquery and jquery-plugins but there's no jQuery in your sample code.) — StvnW, Apr 23 '14 at 18:16
@StvnW although i dont have much knowledge of jQuery, but I am hopeful that it will be easy to learn. So I am open for jQuery solution too :-) — pankaj rathod, Apr 23 '14 at 18:44

score 0 · Answer 1 · answered Apr 23 '14 at 18:15

0

If I correctly understand, you want some sort of autocomplete, right?

I think jQuery UI can help you achieve that. Check this link:

http://jqueryui.com/autocomplete/

Regards!

answered Apr 23 '14 at 18:15

knifebright

1

Thanks for the link. However, I could not find any way to customize that utility for setting different font properties for partial text. I mean some text in green and some in red. – pankaj rathod Apr 23 '14 at 18:49
I didn't understand correctly your goal. So, you want to render the text inside the textbox in different colors? The part the user entered in one color and the part suggested by the system in another? – knifebright Apr 24 '14 at 09:09
yes. different font properties for text entered by user and text entered by system. – pankaj rathod Apr 24 '14 at 16:14
Well, as StevnW stated before, is not possible to style part of the text inside a text box. If you really want the feature you describe, consider using a RTE (Rich Text Editor) with no toolbar and as small as possible. Check this one: https://code.google.com/p/lwrte/. – knifebright Apr 29 '14 at 15:43

StvnW · Answer 2 · 2014-04-23T18:50:00.240

Styling the value of the textbox is an all or nothing proposition. You can't style part of it independent of the rest.

A workaround would be to avoid the use of the textbox element, and instead use a div to contain the suggested text. You can update the HTML inside the div using the .innerHTML property (or the .html() function in jQuery) including whatever span elements or inline styles you like.

Something like:

<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()">

If you also want to do something with the contents of mytextbox (such as submit it as part of a form), you'd have to write some JS to later (or simultaneously) validate and transfer the data into the appropriate (perhaps hidden) form fields or AJAX data structures.

Multiple font attributes within a single textbox element

2 Answers2