How to input multiple values into input(textarea) field?

Question

I want to make make suggested text, that a user can click on and create a sentence in a tag. If I have sentences like "my cat is", "my dog is", and "awesome", the user could click them and make sentences like: "my dog is awesome" or "my cat is awesome" depending on which button the user clicks first. But with longer text in the buttons (like sentences).

I don't have code yet because I don't know where to start. I only have an image to demonstrate my idea:

Exaple of inserting text

score 1 · Accepted Answer · edited May 23 '17 at 11:43

First of all, a working jsFiddle can be found here: http://jsfiddle.net/k3y9fa1v/

You could make the buttons like this:

<button>My dog is </button>
<button>My cat is </button>
<button>awesome </button>

Then create the textarea:

<textarea id='my-area'></textarea>

Now to interact with these, create an onClick event handler using JQuery:

// Create a listener that is fired when any button is clicked
$('button').click(function() {
    // Get the text that is inside the button
    var text = $(this).text();

    // Get the current content of the textarea
    var content = $('#my-area').val();

    // Add the text to the textarea
    $('#my-area').val(content + text);
});

Additional code to insert links
If we want to insert links, without putting a link element in the button itself, we can use the data attribute which allows us to store any arbitrary data on an element an let jQuery and CSS interact with it.

For starters, we add this button to the HTML code:

// The data-type will be used in our jQuery code to determine that this
// button should be interpreted as a link
// data-link-to provides the URL of the link
<button data-type='link' data-link-to='http://google.com'>google link</button>

Note that the data- attributes can have any name you want (so data-link-to is not a special name, just something I made up). This data attribute is really useful. More examples for your case might be data-capital-first (always capitalize the first letter, data-capital-word (always capitalize each individual word) etc... These examples might seem silly, as you can just put a string in the button that already has the right capitalized characters. However if you were to make your code for this more complex (detecting the start of a sentence so you can add a capital letter, these might be useful).

You can use plain CSS to target this element using the following selector:

[data-type='link'] {
    background-color:rgb(110, 177, 252);
}

See this link for more information on the selector and its browser compatibility.

I modified the above jQuery to work with the new button we added. jQuery has a very useful builtin .data() function, which allows us to get the specific data attributes of an element.

$('button').click(function() {
    // Get the text that is inside the button
    var text = $(this).text();

    // Get the data-type attribute value
    var type = $(this).data('type');

    // Get the current content of the textarea
    var content = $('#my-area').val();

    // Check whether to add the text normally or add a link
    if (type == 'link') {
        // Retrieve the link address from the button and create the anchor text
        var link_ref = $(this).data('link-to');

        // Alter the text variable to be surrounded by tha anchor tag
        // with its specified href
        text = '<a href="' + link_ref + '">' + text + '</a>';
    }

    // Set the value of the textarea to the new value
    $('#my-area').val(content + text);
});

This is exactly what I need! Thank you. What if I eant some text to be link? Is it possible? — purgeru, Feb 06 '15 at 14:56
You mean if you need the text to be a link to somewhere? That would certainly be possible. If this is what you need I will edit my answer and add it. — Thijs Riezebeek, Feb 06 '15 at 15:00
Yes. A added the anchor tag to the button. But it outputs normal text to texarea. — purgeru, Feb 06 '15 at 18:06
Change `text = $(this).text()` to `text = $(this).html()` then you can add the anchor tags. However, this will probable cause the browser to redirect to the link, because it was clicked inside the button. — Thijs Riezebeek, Feb 06 '15 at 18:14
Unfortunately it doesnt work. Here is JSFiddle of product I am making: http://jsfiddle.net/qyac6n3d/embedded/result/. Tha I tried with CKEditor to insert anchor tags after pasting text... but it doesnt work either http://jsfiddle.net/qyac6n3d/2/embedded/result/ — purgeru, Feb 06 '15 at 21:43
I added code which lets you insert links into the textarea. Also, instead of using `.append()` to add the text, use `.val()` to set it. This is way more robust and `.append()` will fail, because after a textarea is edited, the buttons will no longer work. Using `.val()` solves this. — Thijs Riezebeek, Feb 06 '15 at 23:33
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/70437/discussion-between-purgeru-and-thijs-riezebeek). — purgeru, Feb 07 '15 at 00:26

How to input multiple values into input(textarea) field?

1 Answers1