CODEWITHSUNDEEP
javascriptjquery
Branndon
Branndon

Reputation: 505

Set textbox content prefix and postfix via jquery and make it un-editable?

I have an input field for the user to insert their own wordpress shortcode. 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.

Upvotes: 0

Views: 1170

Answers (2)

Ashfaque Ali Solangi
Ashfaque Ali Solangi

Reputation: 1891

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/

Upvotes: 0

Howard Renollet
Howard Renollet

Reputation: 4739

UPDATED

For some reason, I cannot get this code to work in jsFiddle, but I have extensively tested this code in the following browsers:

Chrome Version 30.0.1599.101 m - Working

FireFox 19 - Working

FireFox 24 - Working

Safari 5.1.7 - Working.

IE10 - Working

IE9 - Working

IE8 - Partially Working (cannot select text between brackets)

IE7 - Partially Working (cannot select text between brackets)

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.

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.

Upvotes: 1

Related Questions