文本域光标操作（选、添、删、取）的jQuery扩展

浏览数：41 / 时间：2015年06月09日

; (function ($) {
            /*
             * 文本域光标操作（选、添、删、取）的jQuery扩展 @Mr.Think http://mrthink.net/text-field-jquery-extend/
             */
            $.fn.extend({
                /*
                 * 获取光标所在位置
                 */
                iGetFieldPos: function () {
                    var field = this.get(0);
                    if (document.selection) {
                        //IE
                        $(this).focus();
                        var sel = document.selection;
                        var range = sel.createRange();
                        var dupRange = range.duplicate();
                        dupRange.moveToElementText(field);
                        dupRange.setEndPoint(‘EndToEnd‘, range);
                        field.selectionStart = dupRange.text.length - range.text.length;
                        field.selectionEnd = field.selectionStart + range.text.length;
                    }
                    return field.selectionStart;
                },
                /*
                 * 选中指定位置内字符 || 设置光标位置
                 * --- 从start起选中(含第start个)，到第end结束（不含第end个）
                 * --- 若不输入end值，即为设置光标的位置（第start字符后）
                 */
                iSelectField: function (start, end) {
                    var field = this.get(0);
                    //end未定义，则为设置光标位置
                    if (arguments[1] == undefined) {
                        end = start;
                    }
                    if (document.selection) {
                        //IE
                        var range = field.createTextRange();
                        range.moveEnd(‘character‘, -$(this).val().length);
                        range.moveEnd(‘character‘, end);
                        range.moveStart(‘character‘, start);
                        range.select();
                    } else {
                        //非IE
                        field.setSelectionRange(start, end);
                        $(this).focus();
                    }
                },
                /*
                 * 选中指定字符串
                 */
                iSelectStr: function (str) {
                    var field = this.get(0);
                    var i = $(this).val().indexOf(str);
                    i != -1 ? $(this).iSelectField(i, i + str.length) : false;
                },
                /*
                 * 在光标之后插入字符串
                 */
                iAddField: function (str) {
                    var field = this.get(0);
                    var v = $(this).val();
                    var len = $(this).val().length;
                    if (document.selection) {
                        //IE
                        $(this).focus()
                        document.selection.createRange().text = str;
                    } else {
                        //非IE
                        var selPos = field.selectionStart;
                        $(this).val($(this).val().slice(0, field.selectionStart) + str + $(this).val().slice(field.selectionStart, len));
                        this.iSelectField(selPos + str.length);
                    };
                },
                /*
                 * 删除光标前面(-)或者后面(+)的n个字符
                 */
                iDelField: function (n) {
                    var field = this.get(0);
                    var pos = $(this).iGetFieldPos();
                    var v = $(this).val();
                    //大于0则删除后面，小于0则删除前面
                    $(this).val(n > 0 ? v.slice(0, pos - n) + v.slice(pos) : v.slice(0, pos) + v.slice(pos - n));
                    $(this).iSelectField(pos - (n < 0 ? 0 : n));
                }
            });
        })(jQuery);

应用场景

<!DOCTYPE html>
<html>
<head>
    <title>无标题页</title>

    <script type="text/javascript" src="http://sy.zgsapt.com/js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">
        ; (function ($) {
            /*
             * 文本域光标操作（选、添、删、取）的jQuery扩展 @Mr.Think http://mrthink.net/text-field-jquery-extend/
             */
            $.fn.extend({
                /*
                 * 获取光标所在位置
                 */
                iGetFieldPos: function () {
                    var field = this.get(0);
                    if (document.selection) {
                        //IE
                        $(this).focus();
                        var sel = document.selection;
                        var range = sel.createRange();
                        var dupRange = range.duplicate();
                        dupRange.moveToElementText(field);
                        dupRange.setEndPoint(‘EndToEnd‘, range);
                        field.selectionStart = dupRange.text.length - range.text.length;
                        field.selectionEnd = field.selectionStart + range.text.length;
                    }
                    return field.selectionStart;
                },
                /*
                 * 选中指定位置内字符 || 设置光标位置
                 * --- 从start起选中(含第start个)，到第end结束（不含第end个）
                 * --- 若不输入end值，即为设置光标的位置（第start字符后）
                 */
                iSelectField: function (start, end) {
                    var field = this.get(0);
                    //end未定义，则为设置光标位置
                    if (arguments[1] == undefined) {
                        end = start;
                    }
                    if (document.selection) {
                        //IE
                        var range = field.createTextRange();
                        range.moveEnd(‘character‘, -$(this).val().length);
                        range.moveEnd(‘character‘, end);
                        range.moveStart(‘character‘, start);
                        range.select();
                    } else {
                        //非IE
                        field.setSelectionRange(start, end);
                        $(this).focus();
                    }
                },
                /*
                 * 选中指定字符串
                 */
                iSelectStr: function (str) {
                    var field = this.get(0);
                    var i = $(this).val().indexOf(str);
                    i != -1 ? $(this).iSelectField(i, i + str.length) : false;
                },
                /*
                 * 在光标之后插入字符串
                 */
                iAddField: function (str) {
                    var field = this.get(0);
                    var v = $(this).val();
                    var len = $(this).val().length;
                    if (document.selection) {
                        //IE
                        $(this).focus()
                        document.selection.createRange().text = str;
                    } else {
                        //非IE
                        var selPos = field.selectionStart;
                        $(this).val($(this).val().slice(0, field.selectionStart) + str + $(this).val().slice(field.selectionStart, len));
                        this.iSelectField(selPos + str.length);
                    };
                },
                /*
                 * 删除光标前面(-)或者后面(+)的n个字符
                 */
                iDelField: function (n) {
                    var field = this.get(0);
                    var pos = $(this).iGetFieldPos();
                    var v = $(this).val();
                    //大于0则删除后面，小于0则删除前面
                    $(this).val(n > 0 ? v.slice(0, pos - n) + v.slice(pos) : v.slice(0, pos) + v.slice(pos - n));
                    $(this).iSelectField(pos - (n < 0 ? 0 : n));
                }
            });
        })(jQuery);


        $(document).ready(function () {
            $("#numd").bind("mouseleave", function () {
                document.getElementById(‘keybored‘).style.display = ‘none‘;
                document.getElementById(‘Nm‘).blur();
            });

            $("#Nm").focus(function () {
                document.getElementById(‘keybored‘).style.display = ‘‘;
            });
            $(".readbtns").click(function () {
                $("#Nm").iAddField($(this).val());

            });
            $(".returns").click(function () {
                $("#Nm").iDelField(1);

            });
        });

    </script>

</head>
<body>
    <ul>
        <li>
            <input />
            <div>
            </div>
        </li>
    </ul>
    <input id="hid" type="text" value="" style="display: none" />
    <span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">
        <input type="text" id="Nm" name="Nm" value="" />
        <div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"
            id="keybored">
            <input type="button" class="readbtns" value="1" />
            <input type="button" class="readbtns" value="2" />
            <input type="button" class="readbtns" value="3" />
            <input type="button" class="readbtns" value="4" />
            <input type="button" class="readbtns" value="5" />
            <input type="button" class="readbtns" value="6" />
            <input type="button" class="readbtns" value="7" />
            <input type="button" class="readbtns" value="8" />
            <input type="button" class="readbtns" value="9" />
            <input type="button" class="returns" value="<<---" />
        </div>
    </span>
</body>
</html>

经过查阅jQuery的hover

$(‘#hover_div‘).hover(function()
{
/* something to do on mouseenter */
},
function()
{
/* something to do on mouseleave */
});

所以上面的bind("mouseleave")完全可以用hover函数

 $("#numd").hover(function () {
                document.getElementById(‘keybored‘).style.display = ‘‘;
            }, function () {
                document.getElementById(‘keybored‘).style.display = ‘none‘;
                document.getElementById(‘Nm‘).blur();

            });

文本域光标操作（选、添、删、取）的jQuery扩展,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

文本域光标操作（选、添、删、取）的jQuery扩展