Не удается ввести текст в текстовое поле HTML - PullRequest
Новая
       28

Не удается ввести текст в текстовое поле HTML

0 голосов
/ 08 июля 2010

У меня есть скрипт, который позволяет мне перетаскивать некоторый контент в div.

Но поскольку вы можете перемещаться, независимо от того, где вы поместили курсор в элемент div, я не могу ввести какой-либо текст в текстовое поле.

Можно ли это допустить?

Я могу легко кликать по ссылкам в контейнере div. Но не вводите текст в поле ввода html.

Это JavaScript: 

$(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 ]

4 голосов
/ 08 июля 2010

return false в mousedown не позволяет нажатию кнопки мыши выполнять действие по умолчанию, которое заключается в фокусировке дочернего элемента <input>.

Вы можете проверить event.target в функции mousedownчтобы увидеть, является ли это элементом <input>, и если это так, просто прекратите пытаться обработать его (return или return true сразу).

Если вы хотите разрешить перетаскивание элемента, когдамышь находится в <input>, вы все еще можете return false, но вручную вызвать focus() на входе в mousedown.Недостатком этого является то, что пользователь не может использовать перетаскивание для выделения части текста, как обычно позволяют входные данные.

0 голосов
/ 08 июля 2010

Почему бы вам не добавить событие наведения мыши в текстовое поле, которое устанавливает это:

...