텍스트 필드 커서 작업(선택,추가,삭제,제거)의 jQuery 확장

44847 단어 jquery
; (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     
                    if(pos>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 */
});

그래서 위의 bid("mouseleave")는 hover 함수 로 충분히 사용 할 수 있 습 니 다.
 $("#numd").hover(function () {
                document.getElementById('keybored').style.display = '';
            }, function () {
                document.getElementById('keybored').style.display = 'none';
                document.getElementById('Nm').blur();

            });

좋은 웹페이지 즐겨찾기