为啥专注于输入框和选项不适用于引导模式？

Posted 2023-05-08

【中文标题】为啥专注于输入框和选项不适用于引导模式？

【英文标题】：why focus on input box and options does not work with bootstrap modal?为什么专注于输入框和选项不适用于引导模式？

【发布时间】：2015-03-14 23:57:12

【问题描述】：

我使用 twitter bootstrap 向我的模态窗口添加了一个可拖动指令，它存在输入文本框和选择无法聚焦/访问的问题。

Index.Html

   <div  class=" bg-white" modaldraggable>
        <form name="_form" class="form-horizontal" ng-submit="submit(_form)">
               <div class="modal-header">
                 <h3>Chart Settings</h3>
              </div>
               <div  class="modal-body" >
               <input name="inptxt">
              </div>
              <div class="modal-footer">    
              <button ng-click="dismiss()"  class="btn btn-default" tabindex="-1"><i class="glyphicon glyphicon-remove"></i>Cancel</button>
              <button type="submit"   class="btn btn-default" ><i class="glyphicon glyphicon-ok"></i>Save</button>
              </div>
        </form>
    </div>

App.Js：

routerApp.directive('modaldraggable', function ($document) 
  "use strict";
  return function (scope, element) 
    var startX = 0,
      startY = 0,
      x = 0,
      y = 0;
     element= angular.element(document.getElementsByClassName("modal-dialog"));
     console.log("added directive");
      // element.css(
      //  position: 'fixed',
      //   cursor: 'move'
      // );

    element.on('mousedown', function (event) 
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.screenX - x;
      startY = event.screenY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    );

    function mousemove(event) 
      y = event.screenY - startY;
      x = event.screenX - startX;
      element.css(
        top: y + 'px',
        left: x + 'px'
      );
    

    function mouseup() 
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    
  ;
);

这里是笨蛋，

http://plnkr.co/edit/naVFDnnezpyW65DxYu4N

【问题讨论】：

我没有找到任何输入

请刷新，我现在做了修改

【参考方案1】：

jquery ui 定义可拖动的方式http://bugs.jqueryui.com/ticket/4945

你用你的可拖动指令做了类似的事情。您已设置 event.preventDefault()，这将禁用文本选择，但也会影响可拖动模式中的输入。

解决方案不是删除 e.prevent 默认值，因为它将再次启用 textselection ，这在拖动元素时看起来很奇怪（尝试在文本图表​​设置上拖动模式）。

解决方法：您可以定义模态的句柄，使用它可以拖动模态。例如，只有当鼠标指针位于 modal-header 上时，您才能拖动 modal。这不会启用文本选择。

【讨论】：

你确实意识到你只是重复了我说的话，对吧？我回答的最后一句话是：“但我仍然认为你应该有一个可拖动的区域，而不是让整个东西都可以拖动”

@DinuSorin。是的，我确实意识到，但想说明为什么不应该这样做而不是你回答的内容

@NaeemShaikh 我该怎么做？

这个修复有帮助！谢谢！

【参考方案2】：

element.on('mousedown', function (event) 
  // Prevent default dragging of selected content
  **event.preventDefault();**
  startX = event.screenX - x;
  startY = event.screenY - y;
  $document.on('mousemove', mousemove);
  $document.on('mouseup', mouseup);
);

您阻止了默认操作的发生（在您的情况下，专注于输入）您永远不应该有一个可以从任何地方拖动并且其中包含内容的面板。您应该有一个拖动区域（如标题）。

这里是注释掉默认阻止的代码：http://plnkr.co/edit/3cpq4vQADP1snHhBMLIj?p=info

但我仍然认为你应该有一个可拖动的区域，而不是让整个东西都可以拖动

【讨论】：

这会启用文本选择.. 尝试将鼠标放在文本上时拖动模式（在图表设置上）.. 看看它的外观..

@NaeemShaikh 我没有发现任何问题。你知道，点击任何按钮时模式会关闭吗？

【参考方案3】：

我已经重写了目录以允许仅在模态标题标题部分上拖动。此外，它还允许您输入表单输入。

angular.module('app')
    .directive('modalMovable', ['$document',
    function ($document) 
    return 
        restrict: 'AC',
        link: function (scope, iElement, iAttrs) 
            var startX = 0,
                startY = 0,
                x = 0,
                y = 0;

            dialogWrapper = angular.element(document.getElementsByClassName("modal-content"));

            dialogWrapper.css(
                position: 'relative'
            );

            dialogWrapper.on('mousedown', function (event) 
                if (event.target.classList.contains('modal-header') == false && event.target.classList.contains('modal-title') == false) 
                    return true;
                
                startX = event.pageX - x;
                startY = event.pageY - y;
                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
            );

            function mousemove(event) 
                y = event.pageY - startY;
                x = event.pageX - startX;
                dialogWrapper.css(
                    top: y + 'px',
                    left: x + 'px'
                );
            

            function mouseup() 
                $document.unbind('mousemove', mousemove);
                $document.unbind('mouseup', mouseup);
            
        
    ;

]);

然后添加

<div class="modal-header" modal-movable>
    <h4 class="modal-title">some title</h4>
</div>