Jump to content

Add text when click on


Sunamena
 Share

Recommended Posts

This is currently my Function:

 

function insertText(elemID, text)
      {
        var elem = document.getElementById(elemID);
        elem.innerHTML += text;
      }

 

 

And this is my onclick: 

 

onclick="insertText('bericht', 'mytext');"


What it needs to do is add mytext at the END of the current text in my Textarea.

This function works, but as soon as i enter something IN the textarea, the function stops working.



Does anyone here know how to solve this issue?

Link to comment
Share on other sites

If you want a event to be triggered everytime something is typed within the textarea then use 'onkeyup' event instead of 'onclick.

function insertText(elemID, text)
            {
                var elem = document.getElementById(elemID);
                elem.value += text;
            }
<textarea name="textarea1" id="bericht" onkeyup="insertText('bericht', 'mytext');"></textarea>

IF you want to identify a specific key press for example 'enter' key, you have to pass event and check keycode was 13

<textarea name="textarea1" id="bericht" onkeyup="insertText('bericht', 'mytext', event);"></textarea>
function insertText(elemID, text, e)
            {
                var code = (e.keyCode ? e.keyCode : e.which);
                var elem = document.getElementById(elemID);
                if (code === 13) {
                    elem.value += text;
                }
            }

 

Edited by dsonesuk
Link to comment
Share on other sites

As soon as i start typing in the textarea and press the image with the onclick command, it stops functioning.


Both innerHTML and value put the content IN the textarea, but NOT anymore once any action has been preformed inside the textarea (such as deleted or typed something)

Link to comment
Share on other sites

There is a browser compatibility issue with using innerHTML for a form input, that is why you should use value instead.

This works fine for me, in all browsers

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>

        <script type="text/javascript">
            function insertText(elemID, text)
            {

                var elem = document.getElementById(elemID);

                elem.value += (' ' + text);

            }
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div><textarea name="textarea1" id="bericht"></textarea></div>
        <img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" onclick="insertText('bericht', 'mytext');">
    </body>
</html>

 

Link to comment
Share on other sites

Strange something:


It does indeed work like this: 

 

<head>

 

,,,
    <script type="text/javascript">
            function insertText(elemID, text)
            {

                var elem = document.getElementById(elemID);

                elem.value += (' ' + text);

            }
        </script>

 

...

</head>



But i encounter the issues when i do this: 

<head>
...

    <script src="js/mylibrary.js"></script>

...
</head

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...