Include text in a textarea using buttons

Hi everyone,

I am having problems to add text to a textarea using javascript. Well the problem is not that exactly, when I click in some buttons the text is added to the textarea, but not always and not like I want. Imagine I have a text already written in the textarea, if I want to put that text in bold I select that text, and I press the button to bold it. What I should get is this:

[b]I am using bold[ /b]

But I get this:

I am using bold[b][ /b]

Also I don’t know why, but if I write something in the textarea and I want to bold something, or just press in any button to write another different tags, the text it is not written. I could create a video if that helps to understand my problem.

The code I am using:


        <script type="text/javascript">
        function insertText(elemID, text)
                var elem = document.getElementById(elemID);
                elem.innerHTML += text;


                <form class="hilo_wrapper" action="crear_hilo.php?foro=<?php echo str_replace(" ", "%",$foro) ?>&subforo=<?php echo $subforo ?>"  method="post">
                    <div class="data_hilo">
                        <input type="text" name="asunto" placeholder="Asunto:">

                    <div class="botones_crear_hilo">
                        <button type="button" accesskey="b" data-code="[b]" data-close="[/b]" onclick="insertText('txt1', '[b][/b]');" title="Negrita: [b]texto[/b] (Alt+B)">
                            <i class="fa fa-bold fa-fw"></i>
                        <button type="button" accesskey="i" data-code="[i]" data-close="[/i]" onclick="insertText('txt1', '[i][/i]');" title="Cursiva: [i]texto[/i] (Alt+I)">
                            <i class="fa fa-italic fa-fw"></i>
                        <button type="button" accesskey="u" data-code="[u]" data-close="[/u]" onclick="insertText('txt1', '[u][/u]');" title="Subrayado: [u]texto[/u] (Alt+U)">
                            <i class="fa fa-underline fa-fw"></i>
                        <button type="button" accesskey="q" data-code="[quote]" data-close="[/quote]" onclick="insertText('txt1', '[quote][/quote]');" title="Cita: [quote]texto[/quote] (Alt+Q)">
                            <i class="fa fa-quote-right fa-fw"></i>
                        <button type="button" accesskey="c" data-code="[code]" data-close="[/code]" onclick="insertText('txt1', '[code][/code]');" title="Código: [code]texto[/code] (Alt+C)">
                            <i class="fa fa-code fa-fw"></i>
                        <button type="button" name="img" accesskey="p" onclick="insertText('txt1', '[img][/img]');" title="Imagen: [img][/img] (Alt+P)">
                            <i class="fa fa-picture-o fa-fw"></i>
                        <button type="button" name="url" accesskey="w" onclick="insertText('txt1', '[url][/url]');" title="URL: [url][/url] o [url=]texto[/url] (Alt+W)">
                            <i class="fa fa-link fa-fw"></i>
                        <button type="button" accesskey="s" data-code="[spoiler]" data-close="[/spoiler]" onclick="insertText('txt1', '[spoiler][/spoiler]');" title="Spoiler: [spoiler]texto[/spoiler]">
                            <i class="fa fa-list-alt fa-fw"></i>
                        <button type="button" name="mention" title="Mención">
                            <span class="fa-fw" onclick="insertText('txt1', '@');" style="display: inline-block">@</span>
                    <div class="col-100">
                        <textarea  id="txt1" name="texto_hilo" placeholder="Texto:"><?php if (isset($_POST['vista_previa'])) { echo $vista_previa;} ?></textarea>

                        <div class="col-emoticonos-enviar">
                            <input type="submit" name="vista_previa" value="Vista previa">
                            <input type="submit" name="guardar_borrador" value="Guardar borrador">
                            <input type="submit" name="crear_hilo" value="Crear hilo">


Thanks in advice.

because that is what you have coded–appending [b][/b] to the existing text.

PS. and it should be value (like with any other form control), not innerHTML

You are right, I have solved that problem using this:

        <script type="text/javascript">
            function insertText(elemID, first, second) {
             var elem = document.getElementById(elemID);
             elem.value = second ? first + elem.value + second : first + elem.value;

and in the buttons the onclick changing to:

onclick="insertText('txt1', '[b]','[/b]');"

The problem is that the text is taking is not the one I am selecting with the mouse, is all I have in the text area.

because–again–that is not what you have coded. text selections have their own object(s) that handle them.

Could you be more specific instead of telling me that what I get is what I have coded? I am trying to find a solution.

You can get the start/end position of the selected text with myElement.selectionStart and myElement.selectionEnd respectively; you could then wrap the selected text in <b> tags like e.g.

const textarea = document.getElementById('txt1')
const boldButton = document.getElementById('bold')

boldButton.addEventListener('click', () => {
  const {value, selectionStart, selectionEnd} = textarea
  const beforeSelection = value.substring(0, selectionStart)
  const selection = value.substring(selectionStart, selectionEnd)
  const afterSelection = value.substring(selectionEnd)
  textarea.value = beforeSelection 
    + '<b>' + selection + '</b>' 
    + afterSelection


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.