点击后jquery获取光标位置 [英] jquery get the cursor position after click

问题描述

我有一个包含大量输入/ textareas的表单，使用表单的管理员可以在文本中添加动态值，例如：page title =Hi {name}，welcome to {shop_name}。在表单的底部，我有一个所有可用动态值的列表。

I have a form with numerous inputs/textareas, the admin using the form can add dynamic values into the text e.g: page title = "Hi {name}, welcome to {shop_name}". At the bottom of the form I have a list of all the available dynamic values.

问：我要做的是点击列表中的值，找出焦点上的上一个输入并插入值。

Q: What I am trying to do is on click of a value in the list, it finds out the previous input on focus and inserts the value.

更简单的说明如何让这个jsFiddle 为这个输入工作=文本与textarea相同？因此，如果我将光标放在输入字段中，则会在那里添加foo值而不是textarea。

More simple put how would I make this jsFiddle work for this input=text the same as it does for the textarea? So if I had my cursor in the input field it would add the foo value there instead of the textarea.

HTML

<form action="" method="post">     
    <label for="name">Name:</label> 
    <input name="name" type="text" />

    <label for="message">Message:</label> 
   <textarea name="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </textarea>

    <input value="Submit" type="submit" />          
</form>

<h3>Insert short code</h3>
<ul class="inserts">
    <li><a href="#" data-foo="{foo_1}">Foo 1</a></li>
    <li><a href="#" data-foo="{foo_2}">Foo 2</a></li>
    <li><a href="#" data-foo="{foo_3}">Foo 3</a></li>
    <li><a href="#" data-foo="{foo_4}">Foo 4</a></li>
    <li><a href="#" data-foo="{foo_5}">Foo 5</a></li>
</ul>

JS

jQuery.fn.extend({
    insertAtCaret: function (myValue) {
        return this.each(function (i) {
            if (document.selection) {
                //For browsers like Internet Explorer
                this.focus();
                var sel = document.selection.createRange();
                sel.text = myValue;
                this.focus();
            } else if (this.selectionStart || this.selectionStart == '0') {
                //For browsers like Firefox and Webkit based
                var startPos = this.selectionStart;
                var endPos = this.selectionEnd;
                var scrollTop = this.scrollTop;
                this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
                this.focus();
                this.selectionStart = startPos + myValue.length;
                this.selectionEnd = startPos + myValue.length;
                this.scrollTop = scrollTop;
            } else {
                this.value += myValue;
                this.focus();
            }
        });
    }
});

$(".inserts a").click(function (e) {
    e.preventDefault();
    $('textarea').insertAtCaret(
        $(this).data("foo")
    );
});

推荐答案

一种简单的方法是存储最后的位置光标在变量的输入字段中。单击一个按钮后，您可以轻松地将值插入所需位置。足够的思考？ ;）

An easy approach would be to store the last position of the cursor in the input field in a variable. When one button is clicked you can then easily insert the value on the desired position. Enough food for thought? ;)

编辑：
要在位置x上插入字符串，您可以使用此 jQuery插入符号插件或在位置x上拆分原始输入内容并在其间添加新内容。

To insert the String on position x you can either use this jQuery caret plugin or split the original input content on position x and add the new content in between.

也许你还想看一下这个主题。

我的解决方案如下：

var pos = 0;

$('yourField').on('click keypress', function () {
    pos = $(this).caret().start
});

// inside your click function you can use the following
// $.fn.caretTo( index , [ offset ] )
// to add input to a specific position

这篇关于点击后jquery获取光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！