首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

仅使用addEventListener获取输入元素行和列

使用addEventListener获取输入元素行和列的方法如下:

首先,我们需要获取到输入元素的引用。可以通过getElementById、querySelector等方法获取到对应的输入元素。

然后,我们可以使用addEventListener方法来为输入元素添加事件监听器,监听输入事件。

在事件监听器中,可以通过event对象的target属性获取到触发事件的元素。然后,我们可以通过元素的属性或方法来获取行和列的信息。

对于文本输入框,可以使用selectionStart和selectionEnd属性来获取光标所在位置的行和列信息。这两个属性表示光标所在位置的字符索引,可以通过将其转换为行和列的方式来获取行和列信息。

对于文本区域输入框,可以使用selectionStart和selectionEnd属性同样获取光标所在位置的字符索引。然后,可以通过将文本区域的value属性按照换行符分割成数组,再根据光标所在位置的字符索引来计算行和列信息。

示例代码如下:

代码语言:javascript
复制
// 获取输入元素的引用
var inputElement = document.getElementById("input");

// 添加输入事件监听器
inputElement.addEventListener("input", function(event) {
  // 获取触发事件的元素
  var target = event.target;

  // 获取行和列信息
  var row = 1; // 默认行数为1
  var col = 1; // 默认列数为1

  if (target.tagName === "INPUT") {
    // 对于文本输入框
    row = getRow(target);
    col = getCol(target);
  } else if (target.tagName === "TEXTAREA") {
    // 对于文本区域输入框
    row = getRow(target);
    col = getCol(target);
  }

  // 输出行和列信息
  console.log("行:" + row);
  console.log("列:" + col);
});

// 获取输入元素的行信息
function getRow(element) {
  var row = 1; // 默认行数为1

  if (element.selectionStart !== undefined) {
    // 对于支持selectionStart属性的浏览器
    var textBeforeCursor = element.value.substring(0, element.selectionStart);
    row = textBeforeCursor.split("\n").length;
  }

  return row;
}

// 获取输入元素的列信息
function getCol(element) {
  var col = 1; // 默认列数为1

  if (element.selectionStart !== undefined) {
    // 对于支持selectionStart属性的浏览器
    var textBeforeCursor = element.value.substring(0, element.selectionStart);
    var lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
    col = textBeforeCursor.length - lastNewLineIndex;
  }

  return col;
}

这样,我们就可以通过addEventListener方法获取输入元素的行和列信息了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Pandas库的基础使用系列---获取

前言我们上篇文章简单的介绍了如何获取的数据,今天我们一起来看看两个如何结合起来用。获取指定行指定的数据我们依然使用之前的数据。...我们先看看如何通过切片的方法获取指定的所有行的数据info = df.loc[:, ["2021年", "2017年"]]我们注意到,行的位置我们使用类似python中的切片语法。...我们试试看如何将最后一也包含进来。info = df.iloc[:, [1, 4, -1]]可以看到也获取到了,但是值得注意的是,如果我们使用了-1,那么就不能用loc而是要用iloc。...如果要使用索引的方式,要使用下面这段代码df.iloc[2, 2]是不是很简单,接下来我们再看看如何获取多行多。为了更好的的演示,咱们这次指定索引df = pd.read_excel(".....通常是建议这样获取的,因为从代码的可读性上更容易知道我们获取的是哪一行哪一。当然我们也可以通过索引切片的方式获取,只是可读性上没有这么好。

60800

fscanf

输入参数全部折叠fileID - 文件标识符 整数已打开文本文件的文件标识符,指定为整数。使用 fscanf 读取文件之前,您必须使用 fopen 打开文件并获取 fileID。...sizeA - 输出数组的维度Inf (默认) | 整数 | 二素行向量输出数组 A 的维度,指定为 Inf、整数或一个二素行向量。sizeA 输入的格式说明Inf读取到文件末尾。...A 的类大小取决于 formatSpec 输入: 如果 formatSpec 包含数值设定符,则 A 为数值。如果指定 sizeA 参数,则 A 是指定大小的矩阵。否则,A 为一个向量。...如果输入包含的值数少于 sizeA 个,则 fscanf 将使用零填充 A。 如果 formatSpec 包含 64 位有符号整数设定符,则 A 为 int64 类。...如果 formatSpec 包含字符或文本设定符(%c 或 %s),则 A 为字符数组。如果指定 sizeA 并且输入包含比其少的字符,则 fscanf 使用 char(0) 填充 A。

3.4K40
  • 稀疏矩阵计算器(三组实现矩阵加减乘法)

    利用“稀疏”特点进行存储(只存储非零计算可以大大节省存储空间,提高计算效率。实现一个能进行稀疏矩阵基本运算的运算器。...二、需求分析: 以“带行逻辑链接信息”的三组顺序表表示稀疏矩阵,实现两个矩阵相加、相减相乘的运算。稀疏矩阵的输入形式采用三组表示,而运算结果的矩阵则以通常的阵列形式列出。...稀疏矩阵的输出要求:矩阵的行数、数、非零个数,以及详细的矩阵阵列形式。...、非零个数 } RLSMatrix; void CreatSMatrix(RLSMatrix &M) //建立以“带行链接信息”的三组顺序表示的稀疏矩阵 {...for(int i=1; i<=MAXRC+1; i++) M.rpos[i]=0; //令所有的位置都为0 printf("请输入矩阵的行数、非零个数(以空格隔开

    2.2K30

    【DAX 系列】总计行问题终极解决方案

    您可以直接使用本文的模式套路立刻优化您的计算。 问题重现 如果你使用 DAX 很快就会发现总计行的问题。...问题分析 对于这个问题,我们此前就给出了解决方案,很多 DAX 玩家也使用了不同的方式。但今天我们给出更全的方式,而且是一个通用套路。...这里的技巧在于使用 CROSSJOIN 将分组进行了穷举组合。...SUMX 包裹的 分组 将在筛选上下文的影响下发生巧妙的特性: 如果位于元素行,分组的结果就是当前元素,对自己算 [KPI.Row] 就是元素行。...总结 通过本文我们彻底给出了一以贯之的 DAX 计算套路,它实现了如下特点: 可用于元素行计算 可用于小计行计算 可用于总计行计算 满足外部所有筛选有效 可以应对单列分组 可以应对多分组,同表 可以应对多分组

    3.7K20

    Matlab系列之数组的基本操作

    对于一个m行n的数组,分别使用ij代表元素行列的索引,则一个二维数组的寻址可表示为A(i,j);代表A矩阵第中i行j的这个特定元素,如果括号里只有一个数,这种就叫做单下标寻址,如A(k);代表的就是按进行逐一计数...并返回其在整个数组中的索引值,调用格式: k=find(X) k=find(X,n) k=find(X,n,direction) [row,col]=find(___) [row,col,v]=find(___) k表示非零素的下标值...,rowcol分别表示行下标向量下标向量,上一篇说的索引ij是一个东西,只是为了方便理解,这边换rowcol来表示,v表示非零素向量。...在实际应用中,通常使用多逻辑关系组合产生逻辑数字,判断数组元素是否满足某种比较关系,然后通过find函数返回符合比较关系的元素索引,从而实现对数组元素的查找。...B=sort(A) B=sort(A,dim) B=sort(___,direction) B=sort(___,Name,Value) [B,I]=sort(___) B为返回的排序后的数组,A为输入的待排序的数组

    2.1K31

    【计算机视觉】OpenCV图像处理基础

    为此,OpenCV提供了shape、sizedtype这3个常用属性,这3个常用属性代表的含义如下: shape:元组类型的值。如果是彩色图像,元组中有3个值,分别表示像素行数,像素通道数。...如果是灰度图像,元组中有2个值,分别表示像素行像素数。我们通常所说的图像分辨率就是“像素数×像素行数”,如1920×1080。所以通过shape属性可以得到图像的分辨率。...size:图像包含的像素个数,其值是shape元组中3个值的乘积,也就是“像素行数×像素数×通道数”,灰度图像的通道数为1。 dtype:图像数据使用的位数。...=", image_Color.shape) # 获取彩色图像的像素行数、像素通道数 print("size =", image_Color.size) # 获取彩色图像包含的像素个数...# 获取灰度图像的像素行像素数 print("size =", image_Gray.size) # 获取灰度图像包含的像素个数 print("dtype =", image_Gray.dtype

    2.2K20

    SciPy 稀疏矩阵(5):CSR

    因此,获取 LIL 格式的稀疏矩阵中的某一行(第 i 行)的非零素的索引元素值只需要分别访问 rows 属性(数组)第 i 个元素(动态数组) data 属性(数组)的第 i 个元素(动态数组)...如图所示,我们可以发现 LIL 格式的稀疏矩阵虽然可以快速获取某一行的信息,但是它任意相邻两行的非零素的索引以及对应元素值并不是存储在一段连续的内存空间中,换句话说就是当缓存中的第 i 行非零素的信息即将用完的时候...csr_matrix((data, (row_ind, col_ind)), [shape=(M, N)]):data 是非零素值,row_ind 是非零素行索引,col_ind 是非零素的索引...,shape 是矩阵的行列数(M 行 N ),默认会通过非零素行索引外加上非零索引进行推断。...part 06、下回预告 BETTER LIFE 不同于 LIL 格式的稀疏矩阵把相邻两行的非零素的索引元素值存储在内存的不同位置,CSR 格式的稀疏矩阵中相邻两行的非零素的索引元素值在内存中是紧密相连的

    14410

    从HEVC到VVC:帧内预测技术的演进(2) – 多划分及多参考行帧内预测

    每一行(或)编码及重构之后,其重构像素值可以用来预测下一行(或)的像素值。对于采用该技术的预测单元,其需要编码一个比特位来标记当前预测单元采用的是逐行的帧内预测技术还是逐的帧内预测技术。...编码端可以从N个参考像素行中任意的选择一行对当前预测单元中的像素进行编码,并将选定的参考像素行的索引传递到解码端,解码端则根据接收到的参考像素行索引对当前预测单元进行预测。...(2) 当前预测单元可以使用的参考像素行的索引分别是0,1以及3。这是因为在索引号为0~3的参考行中,索引号为01的参考像素行与当前预测单元中的像素距离相对较近,有较高的相关性,因此需要保留。...索引为3的参考像素行与当前预测单元的距离相对较远,可以提供较为不同的参考像素,而索引为2的参考像素行,很难提供额外的参考像素信息。...)的切换,而是始终使用三次插值滤波器。

    2.7K54

    模拟知乎点赞小助手

    PyAutoGUI库基础 pyautogui是一个Python库,用于编程方式控制鼠标键盘操作,可以用于自动化测试、任务其他需求。以下是一个 pyautogui基础使用教程。...如果找到会返回一个四组 (left, top, width, height),表示找到的图像在屏幕上的位置大小。如果没有找到匹配的图像,函数返回 None。...Show me the code 代码获取 项目代码已托管于GitHub,可通过以下链接下载代码图标:GitHub - 知乎点赞机器人 import random import time import...pynput:用于模拟键盘输入,捕获退出信号。 opencv-python:用于图像识别,检测屏幕上的特定图标。 注意事项 坐标精确性:确保使用的像素坐标是左上角的,而不是中心坐标,以提高识别精度。...合理使用:本项目仅供学习研究使用,请勿用于任何违规行为。 视频演示 视频演示中的休息时间间隔调的较短,并做了倍速处理。

    10110

    WPF UNO 测试固定尺寸且水平和垂直对齐设置 Stretch 的元素在容器内的布局行为

    ,元素分别在容器给元素的布局尺寸大于元素的尺寸小于元素尺寸的行为 由于刚好运行在 WPF 之上 UNO 框架里的元素行 WPF 原生布局行为是完全相同的,本文也作为 UNO 的元素布局测试记录内容...当上层容器给定元素的可布局尺寸小于元素所需尺寸时,元素行为将左上对齐时相同 本文以上代码放在github gitee 欢迎访问 可以通过如下方式获取本文的源代码,先创建一个空文件夹,接着使用命令行...cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码 git init git remote add origin https://gitee.com/lindexi/lindexi_gd.git...git pull origin dc173cdd8cea18bdbec9c99f127252efd4f4a5f8 以上使用的是 gitee 的源,如果 gitee 不能访问,请替换为 github 的源...请在命令行继续输入以下代码 git remote remove origin git remote add origin https://github.com/lindexi/lindexi_gd.git

    18310

    flink为什么会成为下一代数据处理框架--大数据面试

    flink Sql 核心算子 sql 是structuredquery language 的缩写,最初 2.1 select select 用于从数据集/流中选择数据,对关系进行垂直分割,消去这些。...一个使用select 的语句如下:select cola,colc from tab 2.2 where where 用于从数据集/流中过滤数据,与select 一起使用,语法遵循ansi-sql 标准...说明:很多场景用户需要获得 Window 的开始结束时间,上面的 GroupWindow的SQL 示例中没有体现,那么窗口的开始结束时间应该怎样获取呢?...,请参考如下完整示例的使用方式。...EventTimeTumbleWindowDemo.scala 3.2 Source Function 定义 支持接收携带 EventTime 的数据集合,Either 的数据结构 Right 是 WaterMark,Left 是数据

    54120

    8 个 DOM 功能

    请看下面这个 CodePen 演示,允许你自定义滚动量行为: CodePen演示:https://codepen.io/impressivewebs/pen/pGYXgj 尝试在框中输入一个数字(最好是一个比较大的数字...单选按钮复选框的 defaultChecked 属性 你可能知道,对于单选按钮复选框,可以直接通过 checked 属性去获取或设置它,如下所示(假设 radioButton 是对特定表单输入的引用...请注意以下演示: CodePen:https://codepen.io/impressivewebs/pen/MRymba 你可以将自己的文本添加到输入字段,然后使用该按钮将其添加到文档中。...左边的 overflow 被设置为 auto,而右边的 overflow 被设置为 hidden。...包括可滚动(或隐藏)区域: CodePen:https://codepen.io/impressivewebs/pen/EJyvoB 上面的演示与前一个相同,只不过它用了 scrollHeight 来获取的高度

    1.8K20

    【调研】GPU矩阵乘法的性能预测——Machine Learning Approach for Predicting The Performance of SpMV on GPU

    使用3个一维的数组来标识稀疏矩阵,分别是非零素、元素行坐标坐标。         这种格式的优点是性能与稀疏矩阵的结构无关,也就是说,不管值如何分布,他的存储都是一样。         ...第一个矩阵用来存非零素,他更像是原矩阵的缩小版,结构很像,但去除了大部分零值,数由一行中非零素的最大值决定,其余位置补零。第二个矩阵用来存非零素的索引。         ...第二个是使用了多层感知器神经网络来预测性能。         感知器是一个单层神经网络。它由四个主要部分组成,包括输入值、权重偏差、净以及激活函数。         ...为了表征这种灵敏度,我们使用每行非零素的数量(mu)每行非零素的标准差(sd)。...3)对于ELL格式:         出于与COOCSR格式相同的原因,我们使用n、nnzdis。         ELL内核对输入矩阵的每一行使用一个线程。

    1.6K20

    像人一样思考的教学芯片

    然而,UM集团使用忆阻器创造了他们的系统,这种系统所需空间较小,可以更容易地集成到现有的基于硅的电子器件中。 忆阻器是可以执行逻辑存储数据的特殊类型的电阻设备。...在这项研究中,吕的团队使用了一个特殊的忆阻器,只记录近些年来的事件。 受大脑启发,神经网络由神经,节点突触组成,节点之间的连接。...该团队使用手写识别测试来验证储层计算概念,这是神经网络的共同基准。数字被分解成像素行,然后用像莫尔斯电码那样的电压输入到计算机中,黑暗像素的电压为零伏特,白色像素的电压为一伏特。...与需88个忆阻器作为节点来识别手写版本的数字相比,传统的网络,将需要数千个节点的任务,油藏达到了91%的准确性。...他说:“即使输入停止,它也可以预测并产生输出信号。

    58750

    OpenCV 4基础篇| OpenCV图像基本操作

    在 Python 3 中,cv2.imwrite() 不支持中文空格作为文件名。如果需要使用中文,可以使用 cv2.imencode() 函数进行处理。...图像的属性 在OpenCV中,经常需要获取图像的大小,类型,像素等图像属性,为此,提供了shape、size、dtype这3个常用函数: shape: shape是一个包含图像高度、宽度通道数的元组...可以通过shape属性获取图像的尺寸。 如果图像是灰度图,返回值就仅有 行数数,所以通过检查这个返回值就可以知道加载的是灰度图还是彩色图。 size: 返回图像的像素数目。...", image_Color.shape) # 打印彩色图像的(像素行数,像素数,通道数) print("size =", image_Color.size) # 打印彩色图像包含的像素个数 print...:") print("shape =", image_Gray.shape) # 打印灰度图像的(像素行数,像素数) print("size =", image_Gray.size) # 打印灰度图像包含的像素个数

    34410

    MatLab变量

    变量命名遵循以下规则: 变量名函数名对字母大小写敏感 变量名函数名必须以字母为开端,其后可以是字母、数字下划线 不能使用 MatLab 关键字作为变量名函数名(可使用 iskeywords 函数查看...(比如 C 语言)中的静态变量,只能在 MatLab 普通函数中定义使用。...(在函数体内部使用) nargout 函数实际输出参数个数(在函数体内部使用) varargin 函数可变长度输入参数列表(1×N1 \times N1×N 胞数组,在函数体内部使用) varargout...函数可变长度输出参数列表(1×N1 \times N1×N 胞数组,在函数体内部使用) i 或 j 虚数 beep 是计算机发出“嘟嘟”声 date 当前日期(字符向量) datetime 当前时间...(datetime类型) clock 当前时间(六素行向量) cputime 当前 MatLab 窗口自启动时使用的总的 CPU 时间(秒为单位) now 自预设日期(0000年 1月 0日)到当前的天数

    67330
    领券