Using JavaScript so button inserts text into current text field

Question

Very simply, I want to write some code that shows a list of buttons. When one is clicked, a chunk of predefined text is inserted into whichever text field the cursor is in at that moment. I can get the text to insert, but only in one text field.

I need this text to be expandable, as it will be used on several pages with different numbers of text field.

The code I have so far is below. I know I need to somehow insert the variable inFocus from the second JavaScript function into the first parameter of the onClick="insertText() function (currently just called txt1).

Am I barking up the wrong tree or is this the correct way to go?

I’ve tried playing with the JavaScript in the main code and come up with this, to no avail. Any ideas?

<script type="text/javascript">
  function insertText(text)
  {
    var elemID = false;  
    $('input, textarea').focus(function() {
    elemID = $(this).attr('id');
    });
    var elem = document.getElementById(elemID);
    elem.innerHTML += text;
  }
</script>

<html>
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
     
    <script type="text/javascript">
      function insertText(elemID, text)
      {
        var elem = document.getElementById(elemID);
        elem.innerHTML += text;
      }
    </script>
    
    <script>
    var inFocus = false;

$('input, textarea').focus(function() {
  inFocus = $(this).attr('id');
});

$('#mybutt').click(function() {
    alert('Cursor was last in element id: ' + inFocus);
});
</script>

</head>
  <body>
  <form>

    <textarea cols="50" rows="10" id="txt1"></textarea><p>
    <textarea cols="50" rows="10" id="txt2"></textarea></p>
    <textarea cols="50" rows="10" id="txt3"></textarea>
    <?php do { ?>
    <input type="button" value="<?php echo $row_tooltips['word']; ?>" onclick="insertText('txt1', '<?php echo $row_tooltips['link']; ?>');">
      <?php } while ($row_tooltips = mysql_fetch_assoc($tooltips)); ?>
    </form>
  </body>
</html>

Can you add only relevant HTML and JavaScript. PHP `do while` loops **do** nothing **while** only confusing the issue. — iambriansreed, Dec 18 '13 at 13:51
the do while loop creates a number of buttons, as the buttons are drawn from a database so it's kind of relevant — user2406993, Dec 18 '13 at 13:54
It's not relevant to the client side issues you are having. Post the HTML it generates so we can deal with that, or just accept my answer: http://stackoverflow.com/a/20660309/144665 — iambriansreed, Dec 18 '13 at 14:14
I'm from 2019, now you can use [document.activeElement](https://developer.mozilla.org/en/DOM/document.activeElement) — MortezaE, Dec 30 '19 at 08:10

score 0 · Answer 1 · answered Dec 18 '13 at 13:48

0

You have jQuery, so you should rid of onclick="" on your button and use the jQuery way.

Example:

$('input[type=button]').click(function(){
    $('#txt1').val('the text you want to insert....');
});

answered Dec 18 '13 at 13:48

Andy

2,892
2
26
33

score 0 · Answer 2 · answered Dec 18 '13 at 13:59

You can compose the jQuery selector from a "#" and your id:

$('#mybutt').click(function() {
    $('#' + inFocus).val('the text you want to insert....');
});

This inserts the text into the element with the id that is inFocus. It will throw an error if no textarea is selected, e.g. inFocus is false.

score 0 · Answer 3 · edited May 23 '17 at 11:47

Inline javascript event attributes are IMO bad practice especially when jQuery is loaded. jQuery makes attaching events to DOM object a breeze.

Using button instead of input type="button" is usually a better idea as your display and value are separate.

See the code comments for more information.

Fiddle:

http://jsfiddle.net/54mES/

HTML

<textarea cols="50" rows="5" id="txt1"></textarea>
<textarea cols="50" rows="5" id="txt2"></textarea>
<textarea cols="50" rows="5" id="txt3"></textarea>
<br>
<button type="button" value=" word1 " class="insert-word">word1</button>
<button type="button" value=" word2 " class="insert-word">word2</button>

JavaScript

var input_position = 0, last_input = false;
// if the input[type="text"] or textarea has a keyup or mouseup event then run this
$('input[type="text"], textarea').on('keyup mouseup', function () {
    last_input = $(this);
    // gets the last input's position
    if('selectionStart' in this) {
        input_position = this.selectionStart;
    } else if('selection' in document) {
        this.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -this.value.length);
        input_position = Sel.text.length - SelLength;
    }
});

$('button.insert-word').click(function () {
    if(!last_input) return; // if an input wasn't selected don't run
    var last_input_value = last_input.val(); // value of input
    var word_to_insert = this.value; // value of button
    // split the last input's value then insert the word    
    last_input.val([
        last_input_value.slice(0, input_position),
        word_to_insert,
        last_input_value.slice(input_position)
    ].join(''));
});

Your welcome. Thanks for accepting, an up-vote would be awesome too. — iambriansreed, Dec 18 '13 at 15:04

user3114077 · Accepted Answer · 2013-12-18T15:19:25.493

    <html>
    <head>
    <script src='jquery.js'></script>
    <script>
    $(document).ready(function(){
        $('.buttonClick').click(function(){


        });
        $( ".textFocus" ).focusout(function() {
         $('#' + this.id).val('This text is append when mouse out from textfield.');
      });


    });
    </script>
    </head>
    <body>
    <button id='b1' class='buttonClick'>button1</button>
    <button id='b2' class='buttonClick'>button2</button>
    <button id='b3' class='buttonClick'>button3</button>
    <button id='b4' class='buttonClick'>button4</button>
    <button id='b5' class='buttonClick'>button5</button><br />
    Textbox1: <textarea cols="50" rows="10" id="txt1" class='textFocus'></textarea><br />
    Textbox2: <textarea cols="50" rows="10" id="txt2" class='textFocus'></textarea><br />
    Textbox3: <textarea cols="50" rows="10" id="txt3" class='textFocus'></textarea>

    </body>
    </html>

I think ,this should help you.Or You need to give more details to me.And to insert data from database,you need to use id of field and call function using ajax and insert that value to textfield.

Using JavaScript so button inserts text into current text field

4 Answers4