通过jquery设置文本框内容前缀和后缀，使其不可编辑？

Question

I have an input field for the user to insert their own wordpress shortcode. 我有一个输入字段供用户插入自己的wordpress简码。 I would like the characters [ and ] to wrap around their text inside the input box. 我希望字符[和]在输入框中包含它们的文本。 I don't want them to be able to remove the brackets, and they should always be there. 我不希望他们能够卸下支架，而支架应始终在其中。

For example in the input box when they first arrive on the page, it would just have this [] then when they focus on that textbox, the cursor should stay between the brackets, and they should't ever be able to delete the brackets. 例如，当他们第一次到达页面时，在输入框中将只有[]然后当他们将焦点放在该文本框上时，光标应停留在括号之间，并且他们永远无法删除括号。

Answer 1

UPDATED 更新

For some reason, I cannot get this code to work in jsFiddle, but I have extensively tested this code in the following browsers: 由于某些原因，我无法使此代码在jsFiddle中工作，但是我已经在以下浏览器中对该代码进行了广泛的测试：

Chrome Version 30.0.1599.101 m - Working Chrome版本30.0.1599.101 m-工作

FireFox 19 - Working FireFox 19-工作

FireFox 24 - Working FireFox 24-工作

Safari 5.1.7 - Working. Safari 5.1.7-工作。

IE10 - Working IE10-工作

IE9 - Working IE9-工作

IE8 - Partially Working (cannot select text between brackets) IE8-部分有效（无法在方括号之间选择文本）

IE7 - Partially Working (cannot select text between brackets) IE7-部分有效（无法在方括号之间选择文本）

I did find that there was a reported potential security concern for the older versions of IE when using the createTextRange function which is likely why the code is not working in these versions. 我确实发现，使用createTextRange函数时，有较旧版本的IE存在潜在的安全隐患，这可能是代码在这些版本中不起作用的原因。

There have been several changes made to the original code that was posted. 对发布的原始代码进行了一些更改。

<head>
    <title></title>
    <script>
        var setBrackets = function (elem) {
            var text = elem.value;
            text = text.replace("[", "").replace("]", "");
            text = "[" + text + "]";
            elem.value = text;
        };

        var selectRange = function (elem) {
            var endPos = elem.value.length - 1;
            var startPos = 1;
            window.setTimeout(function () {
                if (typeof elem.selectionStart === "number") {
                    elem.selectionStart = startPos;
                    elem.selectionEnd = endPos;
                } else if (typeof elem.createTextRange !== "undefined") {
                    elem.focus();
                    var range = elem.createTextRange();
                    range.collapse(true);
                    range.select();
                }
            }, 1);
        }
        function checkEmpty(elem) {

            if (elem.value.length > 2) {
                setBrackets(elem);
                selectRange(elem);
            }
            else {
                selectRange(elem);
            }
        }
    </script>
<style>
</style>
</head>
<body>
    <input type="text" id="test" value="[]" onblur="setBrackets(this)" onfocus="checkEmpty(this)"/>
</body>

I hope this works for you. 希望这对您有用。 Please let me know if there's something I can help you with. 请让我知道是否有什么可以帮助您的。

Thanks. 谢谢。

Answer 2

Here is a quick solution, when you need to add a brackets in your text-field / phone number field 当您需要在文本字段/电话号码字段中添加方括号时，这是一种快速的解决方案

http://ashfaqahmed.net/jquery-add-prefix-postfix-on-phone-number-field/ http://ashfaqahmed.net/jquery-add-prefix-postfix-on-phone-number-field/

通过jquery设置文本框内容前缀和后缀，使其不可编辑？

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-10-25 19:01:23

解决方案2
0 2014-02-28 09:27:27

通过jquery设置文本框内容前缀和后缀，使其不可编辑？

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-10-25 19:01:23

解决方案2 0 2014-02-28 09:27:27

解决方案1
1 已采纳 2013-10-25 19:01:23

解决方案2
0 2014-02-28 09:27:27