Include text in a textarea using buttons

JavaScript
1

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:

JavaScript:

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

HTML:

                <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>






                    <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>
                        <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>
                        <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>
                        <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>
                        <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>
                        <button type="button" name="img" accesskey="p" onclick="insertText('txt1', '[img][/img]');" title="Imagen: [img]http://www.ejemplo.com/imagen.jpg[/img] (Alt+P)">
                            <i class="fa fa-picture-o fa-fw"></i>
                        </button>
                        <button type="button" name="url" accesskey="w" onclick="insertText('txt1', '[url][/url]');" title="URL: [url]http://www.ejemplo.com[/url] o [url=http://www.ejemplo.com]texto[/url] (Alt+W)">
                            <i class="fa fa-link fa-fw"></i>
                        </button>
                        <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>
                        <button type="button" name="mention" title="Mención">
                            <span class="fa-fw" onclick="insertText('txt1', '@');" style="display: inline-block">@</span>
                        </button>
                    </div>
                    <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">
                        </div>
                    </div>


                </form>

Thanks in advice.

2

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

3

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;
         }
        </script>

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.

4

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

5

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.

6

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
})

fiddle

7

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