捕获 TextArea 中的选项卡

2024-01-11

有谁知道一个跨浏览器、可靠的解决方案来捕获文本区域字段中 Tab 键的按下,并替换(在正确的位置)4 个空格?文本区域用于输入文章,需要此功能。

注意:我尝试使用 FCKEditor 等,它没有捕获选项卡,并且有很多我不需要的功能。我想要一个简单的解决方案,仅用于捕获选项卡。


我没有进行广泛的测试,但这似乎有效:

(我发现“insertAtCursor”函数位于http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817 http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817)

<textarea id="text-area" rows="20" cols="100"></textarea>

<script>
document.getElementById("text-area").onkeydown = function(e) {
  if (!e && event.keyCode == 9)
  {
    event.returnValue = false;
    insertAtCursor(document.getElementById("text-area"), "    ");
  }
  else if (e.keyCode == 9)
  {
    e.preventDefault();
    insertAtCursor(document.getElementById("text-area"), "    ");
  }
};

//http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817
function insertAtCursor(myField, myValue) {
  //IE support
  if (document.selection) {
    var temp;
    myField.focus();
    sel = document.selection.createRange();
    temp = sel.text.length;
    sel.text = myValue;
    if (myValue.length == 0) {
      sel.moveStart('character', myValue.length);
      sel.moveEnd('character', myValue.length);
    } else {
      sel.moveStart('character', -myValue.length + temp);
    }
    sel.select();
  }
  //MOZILLA/NETSCAPE support
  else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
    myField.selectionStart = startPos + myValue.length;
    myField.selectionEnd = startPos + myValue.length;
  } else {
    myField.value += myValue;
  }
}
</script>

EDIT:修改了脚本,使其不使用 jQuery。

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

捕获 TextArea 中的选项卡 的相关文章

随机推荐

  • 尝试连接到远程 MySQL 主机(错误 2003)

    我有一个在 Debian 服务器上运行的 MySQL 实例 我可以毫无问题地在本地连接到它 但是 我无法远程连接到它 当我从命令行尝试此操作时 出现以下错误 ERROR 2003 HY000 Can t connect to MySQL s
  • std::bind 和作用域后堆栈使用

    因此 今天我正在运行一些使用 Address Sanitizer 构建的代码 并偶然发现了一个奇怪的堆栈使用后范围错误 我有这个简化的例子 include
  • CloudFormation - 安全组 VPC 问题

    我有一个模板 用于创建 ELB 并附加 VPC 内的现有子网 这创建得很好 但是当我更新堆栈并添加一个具有 VpcId 属性的安全组 其值等于我附加的子网所属的现有 VPC ID 时 堆栈失败并出现以下错误 您指定了属于不同网络的两个资源
  • 模拟概念和约束的推荐方法是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在介绍概念和约束之前 有几种方法可以模拟这种编译时检查 采取一个 order 函数例如 如何实现LessThanComparable没有概念或约
  • 展平嵌套的 pandas 数据框

    I m wondering how to flatten the nested pandas dataframe as demonstrated in the picture attached 嵌套属性由 数据 字段给出 简而言之 我有一个
  • 如何在 GAE 中设置反应路由?在基本 create-react-app 上的 GAE 中,通过 URL 直接路由到 react-router-dom 路由失败?

    现在回答 这对我来说很难完全正确 通过谷歌的指导很少 我希望这对其他人有帮助 正如丹 科尔尼列斯库 Dan Cornilescu 指出的那样 教练们接受了第一场比赛 所以我们从更具体到不太具体 我通过遵循创建的文件夹结构解决了这个问题npm
  • 在Python中查找扩展名为.txt的目录中的所有文件

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 如何找到具有扩展名的目录中的所有文件 txt在Python中 您可以使用glob htt
  • Azure IoT 中心证书

    我正在尝试使用 Mqtt 在 Azure IoT 中心发布一些数据 我已使用 SAS 令牌成功发布了一些数据 但我的客户想要一个 x509 自生成和自签名证书 Azure 支持这一点 但没有提供太多相关信息 https learn micr
  • 如何使用共享首选项在Listview中保存动态添加的项目?

    protected void onCreate Bundle savedInstanceState TODO Auto generated method stub super onCreate savedInstanceState setC
  • 使用 DRY 原则帮助在服务类中创建灵活的基本“查找”方法

    多年来 我一直在一遍又一遍地重新实现相同的代码 随着进化 但没有找到某种干净 有效的方法来将其抽象出来 该模式是我的服务层中的基本 find Type s 方法 它将选择查询创建抽象为服务中的单个点 但支持快速创建更易于使用的代理方法的能力
  • 其他父控制器 Rails 3.1 内的控制器的自定义验证错误

    我的 Rails 应用程序中有一个 House 模型 它有很多交易 我正在房子的展示页面上显示这些优惠 当我提交表单时 如果使用redirect to 一切正常 但是 如果交易模型存在验证错误 那么我的系统将无法正常工作 交易模型是否存在验
  • MATLAB - 重新定义 YTickLabel

    我在 MATLAB 中编辑颜色条时遇到问题 颜色条已绘制 我想在 YTickLabels 上添加特定测量的单位 dB 这是通过以下命令完成的 cy get ch YTickLabel set ch YTickLabel set ch YTi
  • 如何在 data.table 中以编程方式选择列?

    我有以下数据表 DT DT lt data table V1 1 3 V2 4 6 V3 7 9 我想通过使用存储相关变量名称的对象以编程方式 动态 选择变量的子集 例如 我想选择存储在变量 keep 中的两列 V1 和 V3 keep l
  • 在没有 Azure Front Door 的情况下使用 Azure AD B2C 自定义域

    我想将自定义域与 Azure AD B2C 结合使用 正如 Microsoft 文档中所述 需要使用 Azure Front Door 来执行此操作 为了避免为此服务付费 我想使用我自己的网络服务器 反向代理 Nginx 来执行此操作 我不
  • 如何在 R 中发送读取 csv 的电子邮件并一次发送多封电子邮件?

    我有包含电子邮件的 CSV 文件 如何在 r 中发送多封电子邮件 错误1 send mail 函数不采用 data frame 值 Error in FUN X i Sorry parameter type NA is ambiguous
  • Rstudio 中的拼写检查

    如何在 Rstudio 中配置和使用拼写检查 在工具 gt 全局选项 gt 拼写中 我已将主要词典语言设置为英语 美国 将自定义词典设置为 usr lib rstudio resources dictionaries en US dic 中
  • 添加多个类 html [重复]

    这个问题在这里已经有答案了 是否可以在html中添加多个类 这是我尝试过的 a href class class2 My Text a 谢谢 是的 这是可能的 但您只能声明class每个 HTML 元素一次属性 只需用空格分隔您要应用的类即
  • 将 Excel 工作表行转换为单独的 XML 文件时出现运行时错误

    我想每行导出一个 xml 文件 请参阅打印屏幕中的示例 我收到以下错误 运行时错误 2147024891 80070005 系统错误 2147024891 on doc Save sFile 我使用以下代码读取 Excel 工作表 Micr
  • SSRS 2008 - 报告标题未显示动态数据

    我有一份按部门名称排序的人事报告 但是当我将部门名称字段添加到标题中时 它只正确打印出第一个部门名称 其他每个页面都有标题 但标题中仍然有初始部门名称 而不是正确的部门名称 换句话说 报表标题中对部门名称的字段引用不会更新 我浏览了存储过程
  • 捕获 TextArea 中的选项卡

    有谁知道一个跨浏览器 可靠的解决方案来捕获文本区域字段中 Tab 键的按下 并替换 在正确的位置 4 个空格 文本区域用于输入文章 需要此功能 注意 我尝试使用 FCKEditor 等 它没有捕获选项卡 并且有很多我不需要的功能 我想要一个