将输入框焦点放在负载上

2024-01-11

如何在页面加载时光标聚焦在特定输入框上?

是否也可以保留初始文本值并将光标放在输入末尾?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

你的问题有两个部分。

1)如何将输入集中在页面加载上?

您只需添加autofocus属性到输入。

<input id="myinputbox" type="text" autofocus>

然而,这可能不是所有浏览器都支持,所以我们可以使用 javascript。

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

2)如何将光标置于输入文本的末尾?

这是一个非 jQuery 解决方案,其中包含一些借用的代码另一个SO答案 https://stackoverflow.com/a/1675345/5651.

function placeCursorAtEnd() {
  if (this.setSelectionRange) {
    // Double the length because Opera is inconsistent about 
    // whether a carriage return is one character or two.
    var len = this.value.length * 2;
    this.setSelectionRange(len, len);
  } else {
    // This might work for browsers without setSelectionRange support.
    this.value = this.value;
  }

  if (this.nodeName === "TEXTAREA") {
    // This will scroll a textarea to the bottom if needed
    this.scrollTop = 999999;
  }
};

window.onload = function() {
  var input = document.getElementById("myinputbox");

  if (obj.addEventListener) {
    obj.addEventListener("focus", placeCursorAtEnd, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('onfocus', placeCursorAtEnd);
  }

  input.focus();
}

下面是我如何使用 jQuery 实现此目的的示例。

<input type="text" autofocus>

<script>
$(function() {
  $("[autofocus]").on("focus", function() {
    if (this.setSelectionRange) {
      var len = this.value.length * 2;
      this.setSelectionRange(len, len);
    } else {
      this.value = this.value;
    }
    this.scrollTop = 999999;
  }).focus();
});
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将输入框焦点放在负载上 的相关文章

  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在
  • 使用 CryptoJS 更改密钥 [重复]

    这个问题在这里已经有答案了 我正在使用 CryptoJS 来加密和解密文本 在这里 我只是获取消息并显示加密和解密消息 我使用DES算法进行加密和解密 这是我的 HTML 文件
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 如何让 jquery Tooltipster 插件适用于新创建的 DOM 元素?

    我正在使用 Tooltipster 插件http calebjacob com tooltipster http calebjacob com tooltipster 这很棒 但我已经动态生成了插入到 DOM 中的内容 工具提示程序似乎没有
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 如何在打字稿文件中导入没有定义文件的js库

    随着我们的项目变得越来越大 我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理 然而 我们使用许多库作为 amd 模块 我们不想将其转换为 TypeScript 我们仍然想将它们导入 TypeScript 文件
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • Nginx 无法通过 Ansible 重新启动

    我在剧本中有一个任务 尝试像往常一样通过处理程序重新启动 nginx name run migrations command bash lc some command notify restart nginx 然而 剧本因这个错误而中断 N
  • Feedback.js 服务器 API

    反馈 js http experiments hertzen com jsfeedback 是一个很棒的 jquery 插件 允许您创建反馈表单 其中包括在客户端浏览器上创建的屏幕截图以及表单 如何将捕获的图像和用户的评论发送到服务器端 a
  • 如果未设置变量,则使用函数对其进行初始化 - PHP

    执行脚本时 有时会设置变量 有时不会 有时情况并非如此 我会收到一个通知 表明该变量未定义 为了清除通知 我简单地添加了以下代码 if isset var var NULL 它可以根据需要工作 因为它测试变量是否尚未设置 这样我们就不会设置
  • 有没有办法知道 iOS 中的应用程序何时被删除?

    我的问题是这样的 我在 iOS 应用程序上安排了一些 UILocalNotifications 问题是 如果我删除应用程序而不删除与通知关联的对象 并因此从 ScheduledNotifications 数组中删除通知 通知仍然会触发 尽管
  • 在 C# 中表示什么[重复]

    这个问题在这里已经有答案了 我是 C 新手 直接深入修改我收到的项目的一些代码 但是 我不断看到这样的代码 class SampleCollection
  • Python C API 如何将结构数组从 C 传递到 Python

    对于我正在创建的 python 模块 我想向 python 用户传递一个如下所示的结构数组 struct tcpstat inet prefix local inet prefix remote int lport int rport in
  • CSS规则中选择器的优先级

    让我先展示一下示例代码 tbl tr hover background color FFA270 important tbl td nth child odd background color F0FFE2 cell height 5ex
  • 选项菜单操作栏

    谁能明白为什么我的帮助图标没有显示在操作栏中 我已将代码的相关部分粘贴在下面 谢谢 菜单topline xml
  • 使用 jQuery 交换 div 内容

    这是我的 HTML div class large img src images photos Interior jpg alt The interior div class caption The interior div div div
  • 如何将 POINT mysql 类型与 mysqli - php 一起使用[重复]

    这个问题在这里已经有答案了 基于这张桌子 http php net manual en mysqli stmt bind param php来自 PHP net Type specification chars Character Desc
  • 使用 EF core 2.1 调用 DbFunction

    我尝试调用存储在数据库中的标量函数 这是我的代码 public class PronosticDbContext DbContext public PronosticDbContext DbContextOptions
  • PhoneGap:Camera API getPicture 对话框放大

    在Android 4 4中 使用Camera API getPicture API将导致对话框放大 代码如下 var sourceType pictureSource SAVEDPHOTOALBUM navigator camera get
  • PHPUnit TDD,PHP 致命错误:调用未定义的方法

    我正在使用 PHPUnit 启动一个 TDD 项目 但有些事情确实让我烦恼 似乎只要所有的类和方法都没有实现 所有的测试就无法运行 如果类或方法尚未实现 我该如何使测试继续事件 Thanks 编辑 TDD 的重点不就是你的测试套件在编写测试
  • Django 按计数排序

    我有这些模型 class Project models Model title models CharField max length 80 date created models DateTimeField auto now add Tr
  • 如何在GDB中打印Fortran数组?

    在 C C 中 我通常将指针打印为数组name dimension Fortran 的等价物是什么 Fortran 90 使用描述符来表示其数组的维度 形状 并传递假定形状的数组参数 Fortran 中的指针也很特殊 它们只能指向合格的目标
  • 在 jBoss 6.2 与 jBoss 7.3 中部署应用程序时的不同响应

    我们最近将 jBoss EAP 从 6 2 升级到 7 3 0 升级后 我们观察到该应用程序开始表现异常 我们使用的是 spring 框架版本 4 1 9 RELEASE 例如 RestController public class Com
  • 相当于本机 javascript 中的 $(this)

    我想向按钮添加事件侦听器 并且我对纯 javascript 编码还比较陌生 所以我不知道本机等效项是什么 this 在我的代码中 the markup ul class menu li a href text a li li a href
  • 为什么2010 Cassini 提供静态文件时性能很慢?

    在 2010 年以调试模式运行站点时 当 cassini 提供静态文件时 我的性能变得令人难以置信的缓慢 根据 Firebug 的说法 每个请求大约需要 1 秒才能解析 20 个 2kb 图像 我没有更改任何设置 只是完成了直接安装 然后转
  • 如何在 Android Studio 1.2 中将可绘制文件夹中的图像添加到 ImageView 中?

    自从 Google 为启动器图标添加了 mipmap 文件夹以来 我在使用drawables 文件夹时遇到了问题 我在可绘制文件夹中手动添加了 hdpi 文件夹 但是当我尝试添加 src 路径时 图像不允许我查看和选择它们 如何在 Andr
  • 将输入框焦点放在负载上

    如何在页面加载时光标聚焦在特定输入框上 是否也可以保留初始文本值并将光标放在输入末尾