将输入框焦点放在负载上

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(使用前将#替换为@)

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

  • Meteor:应用程序无法在 0.9.1.1 版本上运行

    出现类似错误 Error TypeError undefined is not a function evaluating Template create anonymous function iron dynamic template j
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • Schema.org 的常见问题解答页面

    我有一个常见问题解答页面 我想用更好的 html 架构来实现它
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • 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
  • 将输入框焦点放在负载上

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