Jquery Draggable 使输入文本字段不可编辑(吞噬 onfocus?)

2024-05-16

我编写了代码(如下),以便能够将输入字段拖动到另一个输入字段上,但似乎可拖动的吞咽input[text].onfocus.

这会导致问题,所有可拖动的输入字段都被禁用(firefox)并且单击鼠标不会将它们聚焦。如果我使用 TAB 键关注输入字段,我可以编辑输入字段,但我必须遍历所有必要的制表符索引。

所以看起来可拖拽吞掉了input[text].onfocus鼠标事件。

有没有办法在绑定时解决这个问题?

<head>
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/js/jquery-ui.js"></script>
  <script type="text/javascript">
  $(document).ready( function() 
  {
    $("#drag-table tr td input").draggable({helper: 'clone', revert: 'invalid', cancel: null, cursor: 'move', addClasses: false, containment: $("#drag-table"), handle: 'h2', opacity: 0.8, scroll: true });
    $("#drag-table tr td input").droppable({
      addClasses: false,
      drop: function(ev, ui) {
        alert('value='+ ui.draggable.val() + ", text=" + ui.draggable.text() + " and deeper=" + ui.draggable[0].value);
        $(this).insertAtCaret(ui.draggable.val());
        ui.draggable.val(null);
        $(this).trigger('change');
      }
    });
  });

  $.fn.insertAtCaret = function (myValue) {
    return this.each(function(){
        //IE support
        if (document.selection) {
            this.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            this.focus();
        }
        //MOZILLA / NETSCAPE support
        else if (this.selectionStart || this.selectionStart == '0') {
            var startPos = this.selectionStart;
            var endPos = this.selectionEnd;
            var scrollTop = this.scrollTop;
            this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
            this.focus();
            this.selectionStart = startPos + myValue.length;
            this.selectionEnd = startPos + myValue.length;
            this.scrollTop = scrollTop;
        } else {
            this.value += myValue;
            this.focus();
        }
    });
  };
  </script>
  </head>
  <body>

  <table border="1" cellspacing="10" cellpadding="10" id="drag-table">
  <tr>
  <td><input type="text" name="1x1y" id="id1x1y" value="text" onfocus="alert('onfocus swallowed?');"/></td> 
  <td><input type="text" name="2x1y" id="id2x1y" onchange="alert('hello');"/></td> 
  </tr>
  <tr>
  <td><input type="text" name="1x2y" id="id1x2y" value="next"/></td> 
  <td><input type="text" name="2x2y" id="id2x2y"/></td> 
  </tr>
  </table>

  </body>

将元素包装在 div 或 span 中(取决于哪个有效),然后对其应用可拖动事件。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery Draggable 使输入文本字段不可编辑(吞噬 onfocus?) 的相关文章

  • 在提交调试之前显示表单值

    如何在表单提交之前将所有表单值转储到警报框中 我有一个像这样的简单表单 我想在提交时在警报或控制台中查看表单值 我正在使用 jQuery 和 jQueryUI DIALOG 作为表单 但任何方法都可以 div title Some More
  • Jqueryui:如何在对话框周围制作阴影?

    我正在尝试在 jqueryui 对话框周围放置阴影 就像是 div class ui widget shadow ui corner all Some stuff in the box with a shadow around it div
  • jQuery clone() 复制数据...有时...?

    使用下面的示例 我有一个tr我正在复制 它包含一个 jQueryautocomplete 第一次克隆时 自动完成功能不起作用 因为附加的data items 一片空白 第二次单击 添加 按钮时 自动完成功能将起作用 此后 再次单击 添加 会
  • 是否有一个 jquery List 插件可以自动排序项目并具有强大的添加/删除方法?

    我已经在谷歌上搜索了几个小时 寻找一些东西来处理我的情况 我还不够熟练 无法编写自己的 jquery 插件 该插件应该自动对列表进行排序 这并不像能够轻松地从列表中添加 删除项目那么重要 Themeroller 功能将是一个优点 我基本上会
  • 启动 jQuery UI 选项卡,没有选项卡处于活动状态且所有面板都隐藏

    我在用着jQuery UI 选项卡 http jqueryui com tabs 在一个项目中 我想知道是否有一种简单的方法可以在文档加载时隐藏所有面板 直到单击选项卡为止 默认情况下 jQuery UI 以激活的选项卡和可见的相应面板开始
  • jquery ui 选项卡不再支持 cookie?怎么办?

    我很抱歉这是一个开放式问题 但我很茫然 从 jquery UI 1 9 版本开始 它们使用cookie选项以保存跨多个页面的选项卡的活动状态 http jqueryui com upgrade guide 1 9 deprecated co
  • Firefox 中的 jQuery 日期选择器日历问题 [重复]

    这个问题在这里已经有答案了 在 2016 年的某些月份 我在 Firefox 移动和网络 中的 jQuery UI 日期选择器中显示了错误的日期 例如 2016 年 3 月 31 日是星期四 2016 年 4 月 1 日当然是星期五 但在我
  • jQuery UI 可排序和对话

    是否可以在两个列表之间拖动 jQuery UI 可排序列表项 其中一个在 jQuery UI 对话框中 另一个不在 jQuery UI 对话框中 我正在尝试创建一个对话框 用户可以将表单字段从对话框中拖到页面上的表单中 但我无法将项目拖出对
  • Jquery Draggable()、clone() 附加 div...请拨动我的 jsfiddle

    UPDATE http jsfiddle net wJUHF 7 http jsfiddle net wJUHF 7 对于任何可能阅读本文的人来说 这是更新且有效的小提琴 我正在努力让这个小提琴发挥作用 这就是问题所在 我可以将图像拖到容器
  • jQuery UI 内联日期选择器自动调整大小到父容器

    我正在使用 twitters bootstrap 的响应式网格系统和 jquery ui datepicker 我有一个inline row spanX 结构中的 datepicker 如下所示 div class row div clas
  • jQuery 价格滑块过滤器

    我已经创建了 jquery 价格滑块 但我不知道如何过滤我的结果 以便在滑动时您只能看到具有该值范围内的产品 HTML div class demo p p div
  • jquery UI datepicker仅月份和年份的css定位问题

    我已经实施了这里讨论的解决方案 JQuery 日期时间选择器 只需选择月份和年份 https stackoverflow com questions 4079525 jquery datetime picker need to pick m
  • 将 jquery-mobile 与 Webpack 结合使用

    我正在尝试使用 webpack 加载 jquery mobile 但到目前为止还没有运气 我知道 jquery mobile 依赖于 jquery ui 而 jquery ui 又依赖于 jquery 如何在 Webpack 中设置这样的场
  • JQuery UI Draggable - 如何知道元素是否可拖动初始化?

    我的逻辑是 if this draginited a drag disabled element shouldn t get pass here as it is inited this draggable 我搜索了很多 找不到实现这个逻辑
  • jRails 是 Rails + jQuery 必须的吗?

    我是rails新手 使用rails 2 3 10 并且想使用jquery 特别是jquery ui 该项目是一个全新的项目 我计划使用 jquery ui 中的一些小部件 如 datapicker 和 selectable 等 我听说可以安
  • 简单的 JQuery 淡入淡出股票

    我查看了多个股票行情 它们的权重都远远不够 我正在寻找一个非常简单的 fadeIn fadeOut JQuery 滚动条 用于显示标题的元素列表 li Story 1 li li Story 2 li li Story 3 li li St
  • jQueryUI autoComplete 返回空列表

    在我的 asp net mvc3 应用程序中 我为搜索框添加了自动完成功能 当我测试它时 该操作返回了 3 个结果 您可以看到显示了一个列表 但是 这是一个空列表 您只看到 3 个 并且 li 标记之间没有任何内容 我很确定 操作没问题 因
  • 如何子类化特定的 jqueryui 小部件方法?

    自从我将 jQueryUI 更新到 1 8 以来 我在实现中发现了一些问题 如果我能找出如何子类化 datepicker 小部件的特定方法 我可以自己修复它 而无需等待修复 所以我调用父代码然后执行我的代码 我正在阅读 widget 但我无
  • Jquery Ui 从数据库自动完成

    我是js新手 我找到了自动完成教程 它运行良好 但是为数据库中的多个值配置了自动完成脚本 每次找到关键字后都会添加逗号 然后再次搜索新关键字 如何将其重写为单个值 acompl js function function split val
  • 如何使用 jQuery UI Sortable 正确相交?

    这是我对 jQuery UI Sortable 进行动画处理的尝试 https codepen io anon pen YdMOXE https codepen io anon pen YdMOXE var startIndex chang

随机推荐

  • 如何从列表类别中对 pandas 数据框进行排序?

    所以我在下面有这个数据集 我想根据我的列表从 名称 列进行排序 以及按 A 升序和按 B 降序排序 import pandas as pd import numpy as np df1 pd DataFrame from items A 1
  • 如何在 ASP.NET MVC 中使用 Html.Action() 将参数传递给 Action?

    我一直在使用Html Action ActionName ControllerName 跨控制器调用子操作 而无需在 Views Shared 中拥有视图 这对于显示会话或 cookie 信息等内容非常有效 我不只是访问 cookie 而是
  • 将 2 个字节转换为整数

    我收到一个 2 个字节的端口号 最低有效字节在前 我想将其转换为整数 以便我可以使用它 我做了这个 char buf 2 Where the received bytes are char port 2 port 0 buf 1 port
  • 使用 suds SOAP 库进行 HTTP 身份验证的奇怪行为

    我有一个正在运行的 python 程序 它使用 suds 通过 SOAP 获取大量数据 Web服务是通过分页功能实现的 这样我就可以抓取nnn每个 fetch 调用的行并获取下一个nnn与后续的电话 如果我使用如下代码向 HTTP 服务器进
  • 500.19 从 iis 运行 nuget gallery 时出错

    我正在尝试运行 Nuget Gallery 的本地安装 但收到与错误配置文件相关的 500 错误 但是 只有从 IIS 运行时才会发生这种情况 如果我从 IIS Express 运行它工作正常 谁能给我任何指示吗 Error Summary
  • Labview 2011 中的 DLL 加载错误

    我在 LabVIEW 中加载 DLL 时遇到了问题 我正在使用 LabVIEW 连接到流量计 为此 制造流量计的公司非常好地为我提供了一个子 VI 库 这些子 VI 中的每一个都调用该公司提供的两个 DLL 库之一中的函数 因此 这些子 V
  • 如何在 EF Core 2.1 中定义外键关系

    我的 DAL 使用 EF Core 2 1 这就是我的模型的样子 一名用户只能拥有一种角色 Role entity kind of master public class Role public int RoleId get set pub
  • Magento 中的子域 htaccess 问题

    public html www domain com public html subdomain subdomain domain com public html htaccess public html subdomain htacces
  • Discord.py 嵌入中禁用按钮/冻结按钮

    I m trying to make a replica of this bot in which when I press any of the buttons below it shows a dropdown menu and you
  • 准备好的语句需要 0 个参数,给定 1 个参数..,使用 php 手册示例 [重复]

    这个问题在这里已经有答案了 我直接从 php 手册示例中获取了这个 它几乎与我需要的相同 但我仍然收到此错误 有人可以告诉我我错过了什么吗 stmt link gt prepare SELECT obitBody Photo FROM tn
  • MSChart 控件中的自定义 X/Y 网格线

    我有一个带有简单 2D 折线图的 C Windows 窗体 我想向其中添加自定义 X 或 Y 轴标记 并绘制自定义网格线 例如 以突出显示的颜色 虚线 我查看了 customLabels 属性 但这似乎覆盖了我仍然想显示的默认网格 这是为了
  • 如何从intellij项目视图中隐藏不必要的文件?

    给定一个示例 gradle 项目 其项目结构如下所示 正如你所看到的 有很多东西你实际上不需要在想法中看到 但你需要它们存在 我知道下面被忽略的文件 文件夹类型Editor File Types但这些正在影响库和项目 idea 会在各处忽略
  • 为什么 ExpandableListView 更改 ChildView 设置(Android)?

    我对使用 ExpandableListView 有疑问 就我而言 我有两个组视图和两个子视图 而子视图由一个带有多个按钮 文本视图等的相对布局组成 例如 当首先扩展第二组并对视图持有者进行一些更改并随后扩展第一组时 先前所做的更改也会自动应
  • Java 中 JButton 的击键/热键

    最初我使用 JMenu 并建立热键以使用加速器工作 它运行得很好 现在我想在 JButton 中实现相同的行为 但我陷入困境 这是我编写的代码 请分享您的想法 以便我可以走上正确的道路 import javax swing import j
  • AngularStrap 工具提示禁用我的自定义指令

    我正在尝试让 bs tooltip AngularStrap 指令与我自己的名为 checkStrength 的自定义指令一起使用 该指令检查密码的强度 单独使用这些指令中的任何一个时 它们都可以正常工作 但不能一起工作 This http
  • CSS 标签“object-fit:cover”不会在 Chrome 中裁剪/剪辑视频

    CSS tag object fit cover无法按预期在 Chrome 中剪辑 裁剪视频 这种情况仅适用于视频且仅在 Chrome 中发生 图像在 Chrome 中正常 在所有其他经过测试的浏览器中 图像和视频都工作正常 The beh
  • 当安装的 RPM 取代了另一个 RPM 时如何检测升级

    RPM scriptlet 被传入 1 https fedoraproject org wiki Packaging Scriptlets rd Packaging ScriptletSnippets Syntax 操作完成后 系统中将保留
  • 自动将所有 GitHub 存储库镜像到 gitlab

    对于 GitLab 必须手动为每个存储库设置拉 推镜像 我想知道那里有any way可以自动将所有 Github 存储库同步到 GitLab 这样 当您在 GitHub 中创建新的存储库时 GitLab 中的存储库将自动创建 并充当拉取镜像
  • C 与 C++ 中的 JNI 调用不同?

    所以我有以下使用 Java 本机接口的 C 代码 但是我想将其转换为 C 但不知道如何转换 include
  • Jquery Draggable 使输入文本字段不可编辑(吞噬 onfocus?)

    我编写了代码 如下 以便能够将输入字段拖动到另一个输入字段上 但似乎可拖动的吞咽input text onfocus 这会导致问题 所有可拖动的输入字段都被禁用 firefox 并且单击鼠标不会将它们聚焦 如果我使用 TAB 键关注输入字段