V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lisisi
V2EX  ›  JavaScript

JS 在文本框任意位置插入一对括号,怎么能让光标停留在括号中间?

  •  
  •   lisisi · 2019-11-20 09:45:06 +08:00 · 4054 次点击
    这是一个创建于 1590 天前的主题,其中的信息可能已经有所发展或是发生改变。

    效果类似输入法,点击插入按钮,在文本框中的当前位置,插入一对括号,然后让光标停留在光标中,方便用户输入。

    <a class="btn" onclick="addBrackets()">点击插入括号</a>
    <textarea id="objText">请在这里输入内容...</textarea>
    
    <script type="text/javascript">
        function addBrackets(){
            var obj = document.getElementById('objText');
            obj.value = obj.value + "()";
            obj.focus();
        }
    </script>
    

    遇到两个问题:一是任意位置插入怎么计算当前位置?另外一个是要怎么把光标 focus 在刚刚插入的这对括号()中间位置?

    8 条回复    2019-11-20 20:10:09 +08:00
    fancy111
        1
    fancy111  
       2019-11-20 09:56:07 +08:00
    不需要计算位置,监听输入事件,当左括号按下的时候,自动补充右括号,然后自动按一次←左键即可。
    IsaacYoung
        2
    IsaacYoung  
       2019-11-20 10:07:34 +08:00 via iPhone
    我记得 Range 对象可以做这个。楼主可以搜一下
    15651980765
        3
    15651980765  
       2019-11-20 10:24:21 +08:00
    先 mark,有时间再看。
    learnshare
        4
    learnshare  
       2019-11-20 10:33:47 +08:00
    从交互上讲不建议这么做,并不符合输入的预期,会给用户带来困扰(个别输入法自作多情而已)

    实现的话,可以考虑劫持某个输入事件,判断最后输入的两个字符,如果是一对括号,则多补一个左箭头
    rabbbit
        5
    rabbbit  
       2019-11-20 10:43:56 +08:00   ❤️ 3
    <input>
    <button>插入</button>

    let input = document.querySelector('input')
    let btn = document.querySelector('button')

    let selectionStart;
    input.addEventListener('blur', function(event) {
    selectionStart = input.selectionStart;
    })
    btn.addEventListener('click', function(event) {
    if (!selectionStart) {
    return;
    }
    input.value = input.value.slice(0, selectionStart)
    + '()'
    + input.value.slice(selectionStart);
    input.focus();
    input.selectionStart = selectionStart + 1;
    input.selectionEnd = selectionStart + 1;
    })
    xuxuzhaozhao
        6
    xuxuzhaozhao  
       2019-11-20 10:48:30 +08:00
    @rabbbit 牛批!
    lisisi
        7
    lisisi  
    OP
       2019-11-20 12:24:58 +08:00
    @rabbbit 很赞!#5 楼很精炼,其他地方的实现都比这个啰嗦
    lisisi
        8
    lisisi  
    OP
       2019-11-20 20:10:09 +08:00
    @rabbbit 出现一个疑问:我把上面 JS 部分放进一个 onclick() 函数之后,反复点两三次,就会一次会插入多个双括号。这是什么原因导致的?

    JS 部分的代码没改动,只是放进了一个 onclick="addBrackets()" 中,就会出现插入多个双括号的情况:

    <input>
    <button onclick="addBrackets()">插入</button>

    <script type="text/javascript">
    function addBrackets() {
    let input = document.querySelector('input')
    let btn = document.querySelector('button')

    let selectionStart;
    input.addEventListener('blur', function(event) {
    selectionStart = input.selectionStart;
    })
    btn.addEventListener('click', function(event) {
    if (!selectionStart) {
    return;
    }
    input.value = input.value.slice(0, selectionStart)
    + '()'
    + input.value.slice(selectionStart);
    input.focus();
    input.selectionStart = selectionStart + 1;
    input.selectionEnd = selectionStart + 1;
    })
    }
    </script>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5529 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 08:58 · PVG 16:58 · LAX 01:58 · JFK 04:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.