Question

很简单，我想编写一些显示按钮列表的代码，当单击一个按钮时，会在当时光标所在的任何文本字段中插入一大块预定义文本。我可以插入文本，但只能在一个文本字段中。

我需要此文本可扩展，因为它将在具有不同数量的文本字段的多个页面上使用。

我到目前为止的代码如下。我知道我需要以某种方式将变量 inFocus 从第二个javascript函数插入到 onClick =“insertText（）函数的第一个参数中（当前名为 txt1 ）。

我是在咆哮错误的树还是这是正确的方法 - 任何想法都会非常感激。

我尝试过使用主代码中的javascript并想出这个，无济于事......有什么想法吗？

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

Answer 1

你有jQuery，所以你应该删除按钮上的onclick=""并使用jQuery方式。

示例：

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

Answer 2

您可以从“＃”和您的id：

组成jQuery选择器

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

这会将文本插入ID为 inFocus 的元素中。如果没有选择textarea，它将抛出一个错误，例如 inFocus 为false。

Answer 3

内联javascript事件属性是IMO bad practice，尤其是在加载jQuery时。 jQuery使得将事件附加到DOM对象变得轻而易举。

使用button代替input type="button"通常更好，因为您的显示和价值是分开的。

有关详细信息，请参阅代码注释。

小提琴：

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(''));
});

Answer 4

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

我认为，这应该对你有帮助。或者你需要向我提供更多细节。要从数据库插入数据，你需要使用字段的id和使用ajax调用函数并将该值插入textfield。

使用javascript按钮将文本插入当前文本字段

4 个答案: