代码之家  ›  专栏  ›  技术社区  ›  janhartmann

无法在html文本字段中输入文本

  •  0
  • janhartmann  · 技术社区  · 14 年前

    我有一个脚本,使我能够在一个div中拖动一些内容。

    我可以随时点击div容器中的链接。但不能在html输入字段中输入文本。

    $(document).ready(function () {
    
    $('#roadmap').mousedown(function (event) {
        $(this)
        .data('down', true)
        .data('x', event.clientX)
        .data('scrollLeft', this.scrollLeft);
    
        return false;
    }).mouseup(function (event) {
        $(this).data('down', false);
    }).mousemove(function (event) {
        if ($(this).data('down') == true) {
            this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
        }
    }).mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
    }).css({
        'overflow': 'hidden',
        'cursor': 'col-resize'
    });
    });
    $(window).mouseout(function (event) {
        if ($('#roadmap').data('down')) {
            try {
                if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
                    $('#roadmap').data('down', false);
                }
            } catch (e) { }
        }
    });
    

    这是我的扩展鼠标滚轮功能(如果需要)

    (function ($) {
    
        $.event.special.mousewheel = {
            setup: function () {
                var handler = $.event.special.mousewheel.handler;
    
                // Fix pageX, pageY, clientX and clientY for mozilla
                if ($.browser.mozilla)
                    $(this).bind('mousemove.mousewheel', function (event) {
                        $.data(this, 'mwcursorposdata', {
                            pageX: event.pageX,
                            pageY: event.pageY,
                            clientX: event.clientX,
                            clientY: event.clientY
                        });
                    });
    
                if (this.addEventListener)
                    this.addEventListener(($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
                else
                    this.onmousewheel = handler;
            },
    
            teardown: function () {
                var handler = $.event.special.mousewheel.handler;
    
                $(this).unbind('mousemove.mousewheel');
    
                if (this.removeEventListener)
                    this.removeEventListener(($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
                else
                    this.onmousewheel = function () { };
    
                $.removeData(this, 'mwcursorposdata');
            },
    
            handler: function (event) {
                var args = Array.prototype.slice.call(arguments, 1);
    
                event = $.event.fix(event || window.event);
                // Get correct pageX, pageY, clientX and clientY for mozilla
                $.extend(event, $.data(this, 'mwcursorposdata') || {});
                var delta = 0, returnValue = true;
    
                if (event.wheelDelta) delta = event.wheelDelta / 120;
                if (event.detail) delta = -event.detail / 3;
                if ($.browser.opera) delta = -event.wheelDelta;
    
                event.data = event.data || {};
                event.type = "mousewheel";
    
                // Add delta to the front of the arguments
                args.unshift(delta);
                // Add event to the front of the arguments
                args.unshift(event);
    
                return $.event.handle.apply(this, args);
            }
        };
    
        $.fn.extend({
            mousewheel: function (fn) {
                return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
            },
    
            unmousewheel: function (fn) {
                return this.unbind("mousewheel", fn);
            }
        });
    
    })(jQuery);
    

    这里是HTML

    <div id="roadmap">
           <ul>
               <li class="roadmap_description">
                 <h2>Welcome</h2>
                 <p>Description</p>
               </li>
               <li><h3 class="milestone_name">v. 1.0.2.3</h3>
                   <ul>
                        <li class="milestone_item"><a href="#">Title description</a></li>
                   </ul>
                    <div class="milestone_item_add">
                         <input class="field" name="milestone_item_name" type="text" /><a href="#"><img src="/Intranet/admin/Intranet/css/images/icons/wand.png" alt="Add new" /></a>
                    </div>
               </li>
    </ul>
        </div>
    

    非常感谢。

    2 回复  |  直到 14 年前
        1
  •  4
  •   bobince    14 年前

    这个 return false 在里面 mousedown <input> .

    你可以试试 event.target 鼠标按下 函数来查看是否是 <输入> return return true

    <输入> ,你还是可以的 但是手动调用 focus() 鼠标按下 . 这样做的缺点是用户不能使用拖拽来选择文本的一部分,因为输入通常是允许的。

        2
  •  0
  •   Matt Evanoff    14 年前