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

如何在文本框中获取插入符号的(x,y)像素坐标?

要在文本框中获取插入符号的(x,y)像素坐标,可以使用JavaScript的getBoundingClientRect()方法和window.getSelection()方法。以下是一个简单的示例代码:

代码语言:javascript
复制
function getCursorPosition(inputElement) {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  const x = rect.left;
  const y = rect.top;
  return { x, y };
}

const inputElement = document.getElementById('input-element');
inputElement.addEventListener('click', () => {
  const cursorPosition = getCursorPosition(inputElement);
  console.log(`x: ${cursorPosition.x}, y: ${cursorPosition.y}`);
});

这段代码首先定义了一个getCursorPosition函数,该函数接受一个inputElement参数,该参数是要获取插入符号位置的文本框元素。函数内部,我们首先获取当前选择范围,然后获取选择范围的边界矩形,最后从边界矩形中获取x和y坐标。

接下来,我们为文本框添加了一个click事件监听器,当用户点击文本框时,我们调用getCursorPosition函数获取插入符号的坐标,并将其打印到控制台中。

需要注意的是,这个方法只适用于可编辑的文本框,不适用于不可编辑的文本框或其他类型的输入框。

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

相关·内容

ArcEngine三维开发时如何在ArcSceneControl获取实时x,y,z坐标并显示到状态栏(也就是基于ArcObjects开发)

在基于ArcEngine三维开发时,如何在ArcSceneControl获取实时x,y,z坐标并显示到状态栏: 很明显,要让鼠标在三维场景视图ArcSceneControl中移动时,在状态栏实时显示...xyz坐标,肯定要用到是OnMouseMove事件。...首先添加该事件,然后在状态栏添加三个显示坐标控件,可以是文本框、标签等,能显示坐标文本就行了。这里就不赘述了,比较简单。...下面看最核心代码,就是如何获取xyz坐标值:             barEditItemX.EditValue = "";             barEditItemY.EditValue =...e.y, esriScenePickMode.esriScenePickAll, false, out pHit3Dset); pHit3Dset.OnePerLayer();

1.5K30

零基础学Python【二十三、图形化界面设计 】(基础一篇全,欢迎认领)

5、控件布局 5.1、place() 使用方法 x:指定组件 X 坐标x 为 0 代表位于最左边。 y:指定组件 Y 坐标y 为 0 代表位于最右边。...当使用 Place 布局管理容器组件时,需要设置组件 xy 或 relx、rely 选项,Tkinter 容器内坐标系统原点 (0,0) 在左上角,其中 X 轴向右延伸,Y 轴向下延伸,如图所示...如果通过 xy 指定坐标,单位就是 pixel(像素);如果通过 relx、rely 指定坐标,则以整个父容器宽度、高度为 1。...) 将光标移动到指定索引位置,只有当文框获取焦点后成立 4 index ( index ) 返回指定索引值 5 insert ( index, s ) 向文本框插入值,index:插入位置,s:插入值...event属性见下表: event属性 意义 xy(注意是小写) 相对于事件绑定控件实例左上角坐标值(像素) root_x或root_y(注意是小写) 相对于显示屏幕左上角坐标值(像素) char

14.2K30
  • flash代码大全_flash脚本语言

    分别设置变 量名为munite和timer,在两个文本框之间画一个形如冒号圆点(这两个圆点可以做成一个 符号,类型为电影片段,每秒闪动一次.然后拖入到两文本框之间。在第二帧插入帧。...将其拖入主场景即可。 2.智能判断速择题,并作正误提示 单击菜单Insert/new symbo1,在弹出对话框输入插入符名称。:“对错提示”。 符号类型为“电影片段”。...插入一段音乐:在Pile/Import to Library,找到要插入音乐(战马奔腾),打开符 号库,找到“战马奔腾”符号,单击右键,在弹出菜单单击Linkage…命令,再在弹出 菜单中选中...,“_x”和“_y”指的是X坐标Y坐标点,而“position_x”与“ position_y”是位置具体数值。..._x+=(_root._xmouse-mc._x)/a mc._y+=(_root._ymouse-mc._y)/a (turbine) 122。问:如何在AS创建类继承?

    5K20

    视觉进阶 | Numpy和OpenCV图像几何变换

    x’ = Ax 其中A是在齐次坐标2x3矩阵或3x3,x是在齐次坐标(xy)或(xy,1)形式向量。这个公式表示A将任意向量x,映射到另一个向量x’。...欧氏空间中公共变换 在我们对图像进行变换实验之前,让我们看看如何在坐标上进行变换。因为它们本质上与图像是网格二维坐标数组相同。...所以我们只需对I’(xy)像素坐标进行逆变换,如下所示。...确定它在原始图像平面位置 对I(xy)重新采样RGB像素并将其映射回I'(xy) # 设置像素坐标I'(xy) coords = get_grid(width, height, True) x2...许多先进计算机视觉,使用视觉里程计和多视图合成slam,都依赖于最初理解变换。我希望你能更好地理解这些公式是如何在编写和使用

    2.2K20

    【Java AWT 图形界面编程】Container 容器总结

    : 可交互组件对象 , : Button 按钮 , TextField 文本框等 ; Container 组件 : Component 组件类 子类 , 是一种 特殊容器组件 , 可以容纳普通...(int x, int y) : 设置 组件 在 屏幕位置 , 屏幕默认坐标体系 , 左上角为原点 , 向右为 x 轴 , 向下为 y 轴 , 与 Android 屏幕坐标系 类似 ; setSize...(int width, int height) : 设置 组件 大小 , 单位是像素值 ; setBounds(int x, int y, int width, int height) : 同时设置 组件...子类 , 因此 此处也可以添加 Container 容器 ; Component getComponentAt(int x, int y) : 返回指定 屏幕坐标 位置组件 ; int getComponentCount...() : 获取 Container 容器 Component 组件个数 ; Component[] getComponent() : 获取 Container 容器所有 Component 组件

    85610

    C++ OpenCV霍夫变换---直线检测

    霍夫变换 霍夫变换是图像处理从图像识别几何形状基本方法之一,应用很广泛,也有很多改进算法。主要用来从图像中分离出具有某种相同特征几何形状(,直线,圆等)。...任何在直线上点,x, y都可以表达,其中 r, theta是常量。该公式图形表示如下: 然而在实现图像处理领域,图像像素坐标P(x, y)是已知,而r, theta则是我们要寻找变量。...如果我们能绘制每个(r, theta)值根据像素坐标P(x, y)值的话,那么就从图像笛卡尔坐标系统转换到极坐标霍夫空间系统,这种从点到曲线变换称为直线霍夫变换。...当霍夫变换算法开始,每个像素坐标点P(x, y)被转换到(r, theta)曲线点上面,累加到对应格子数据点,当一个波峰出现时候,说明有直线存在。...同样原理,我们可以用来检测圆,只是对于圆参数方程变为 下等式: (x –a ) ^2 + (y-b) ^ 2 = r^2其中(a, b)为圆中心点坐标,r圆半径。

    3.1K20

    复现腾讯表格识别解析| 鹅厂技术

    复现代码 获取: 关注微信公众号 datayx 然后回复 表格 即可获取。...校正方法使用投影变换,也即拟合一个单应矩阵H,使得HX=X',X每一列是在每条直线上以固定距离采样齐次坐标X'对应列是该点校正后齐次坐标。...横线校正至水平,也即线上所有点y坐标一致;竖线校正至竖直,也即线上所有点x坐标一致。最后将求得投影变换应用到原图中,将图片也校正。...由表格框线推导行(列)高(宽)比较容易,只需对所有的横(竖)线按从上(左)到下(右)排序,相临框线形成一行(列),所以只需计算相临框线y坐标x坐标)差即可。...由表格框线推导单元格坐标就不太容易了。因为现实存在很多单元格合并情况,一个单元格可能跨了若干行和若干列。

    2.8K20

    PHP常用函数总结

    ,可以理解为返回数组长度 count(); //获取变量字符串值,可以理解为把变量转换成字符串类型 strval(); //查询数组里是否存在着指定健名,返回true和false array_key_exists...("PRC"); //获取当前时间 date('Y-m-d H:i:s', time()); //获取当前0点时间戳 strtotime(date("Y-m-d"), time()); //下个月现在时间戳...,画板y坐标点,图片x坐标点,图片y坐标点,要压缩到多宽,要压缩到多高,图片宽,图片高); //销毁图像资源 imagedestroy(); //合并图片,把图片2放到图片1里面 imagecopymerge...(图片1,图片2,图片1x坐标点,图片2y坐标点,图片1x坐标点,图片2y坐标点,图片2宽,图片2高,透明度); //设置字体颜色 imagecolorallocatealpha(图片或者画板,...rgb颜色1,rgb颜色2,rgb颜色3,透明度); //在图片或者画板里设置水印 imagettftext(画板或者图片, 字体大小, 字体倾斜度, 字体x坐标, 字体y坐标, 字体颜色imagecolorallocatealpha

    3.8K20

    OpenGL(八)--纹理相关APIOpenGL(八)--纹理相关API

    边界开始) glPixelStorei(GL_UNPACK_ALIGNMENT, 1); 将颜色缓冲区内容作为像素图直接使用 //参数1:x,矩形左下⻆角窗⼝坐标 //参数2:y,矩形左下...⻆角窗⼝坐标 //参数3:width,矩形宽,以像素为单位 //参数4:height,矩形⾼,以像素为单位 //参数5:format,OpenGL 像素格式,参考 表1 //参数6:type,解释参数...GLint y, GLsizei width, GLsizei height, GLint border); // x,y 在颜⾊缓存区中指定了开始读取纹理数据位置; // 缓存区⾥数据,是源缓存区通过...OpenGL 像素格式 ? 表一 像素数据数据类型 ? 表二 4. 纹理坐标 2D纹理坐标左下角为原点(0,0),右上角为(1,1)! ?...坐标对应关系图示 在笛卡尔坐标为:XY,Z 在OpenGl坐标中表示为:S,T,R 一一对应,无其他区别只是命名不同而已。

    1.2K30

    第一次使用ENVI?ENVI入门手册收好!

    Dims显示了遥感影像行列数(1500*1200),数据类型(无符号整型)以及波段存储顺序(BSQ)点击Map Info可以查看该遥感影像一些基本信息(包括投影坐标系,分辨率,基准面左上角经纬度以及大地坐标值...在此选项卡,Data Directory文本框用于设置默认打开文件路径,Output Directory文本框用于设置默认保存文件路径。...在窗口中输入行列号、大地坐标值或者经纬度,即可定位到对应位置上。 ? ? 在该对话框Sample和Line文本框中分别输入列号和行号,点击Apply按钮可将鼠标定位到对应行列号像元上。...在下面E、N文本框中分别输入地坐标的横坐标和纵坐标值,可将鼠标定位到对应大地坐标的像元上。点击箭头切换按钮可以将大地坐标切换为经纬度,如下图所示: ? ?...同理,Y Profile...可获取当前位置所在列剖面。

    3.9K30

    学习总结之HTML5剑指前端

    全局属性 contentEditable属性,功能是允许用户编辑元素内容,该元素是可以获得鼠标焦点元素,而且在点击鼠标后,要向用户提供一个插入符号,提示用户该元素内容允许编辑。...lineTo(x,y),x表示直线终点坐标y为直线终点坐标。...y,width,height); 参数值 |参数| 描述| |:---|:---| |x| 矩形左上角 x 坐标| |y| 矩形左上角 y 坐标| |width| 矩形宽度,以像素计| |height...x 坐标| |y0| 渐变开始点 y 坐标| |x1| 渐变结束点 x 坐标| |y1| 渐变结束点 y 坐标| 定义用蓝色填充矩形: ?...像素处理 使用图形上下文对象getImageData方法来获取图像像素: var imagedata = context.getImageData(sx,sy,sw,sh) 在HTML5:绘制文字

    2K10

    学习总结之HTML5剑指前端(建议收藏,图文并茂)

    全局属性 contentEditable属性,功能是允许用户编辑元素内容,该元素是可以获得鼠标焦点元素,而且在点击鼠标后,要向用户提供一个插入符号,提示用户该元素内容允许编辑。...placeholder是指当文本框处于未输入状态时显示输入提示,autofocus属性自动获取光标焦点。...lineTo(x,y),x表示直线终点坐标y为直线终点坐标。...y,width,height); 参数值 参数 描述 x 矩形左上角 x 坐标 y 矩形左上角 y 坐标 width 矩形宽度,以像素计 height 矩形高度,以像素计 HTML5 canvas...像素处理 使用图形上下文对象getImageData方法来获取图像像素: var imagedata = context.getImageData(sx,sy,sw,sh) 在HTML5:绘制文字

    1.7K10

    论文笔记之STN_论文笔记软件

    可以看到输出feature map对应到输入feature map上格点是经过变换矩阵得到,即 ( x i t , y j t ) (x_i^t,y_j^t) (xit​,yjt​)通过旋转、缩放获取坐标值..., y j s ) (x^s_i,y^s_j) (xis​,yjs​),获取对应 U U U像素值来作为输出feature map( V V V)在 ( i , j ) (i,j) (i,j)处像素值...理想状态是这样,但是一般来说 T ( G ) \mathcal{T}(G) T(G)产生坐标都是小数,因此不能直接取 U U U像素值来输出给 V V V,作者使用一些插值,双线性插值来解决这个问题...\ne (x^s_n, y^s_m) (n,m)​=(xns​,yms​))像素值( ( n , m ) (n,m) (n,m)是 U U U整格点像素坐标); Φ \Phi Φ是插值核函数 k...x,而不是对应到经过特征提取之后feature map,即上述代码xs)上坐标 ( x i s , y j s ) (x_i^s,y_j^s) (xis​,yjs​)。

    86550

    HarmonyOS实战—滑动事件坐标和返回值

    滑动事件获取手指位置 滑动事件三个动作: [在这里插入图片描述] 获取手指位置就涉及到坐标的概念,通过获取xy、z就可以缺任意一个点位置 [在这里插入图片描述] 手机坐标: [在这里插入图片描述...] 除了 xy轴,还有z轴,在鸿蒙手机当中,完整坐标如下,是一个立体三维体系,但平时z轴用非常少,一般情况只需考虑xy轴就行了。...,再用坐标对象分别获取xy坐标。...,获取xy坐标并设置到文本框里,设置完以后整个方法就么有了,获取完后就从内存消失了,按下时xy值也就消失了。...所以在方法外定义xy,因为获取是小数,要定义为float类型 [在这里插入图片描述] 移动位置就不需要获取了,只要按下和松开位置进行对比就可以判断是上、下、左、右哪个滑动了 右滑 [在这里插入图片描述

    1K20

    EAST、PixelLink、TextBoxes++、DBNet、CRNN…你都掌握了吗?一文总结OCR必备经典模型(二)

    训练过程采取了OHEM(Online Hard Example Ming)训练策略,选取r x S个负样本loss最高像素,其中,r为负样本与正样本比值,一般选取3。...基于物体覆盖率C随机裁剪策略更适合于小物体,自然图像大多数文字。...将二值化操作插入到分段网络以进行联合优化,通过这种方式,可以自适应地预测图像每个位置阈值,从而可以将像素与前景和背景完全区分开。...给定pi′坐标,计算出pi坐标。文章固定了基准点在目标图像位置,再来计算目标图像每个坐标像素值。...得到原图中pi坐标后,在Sampler,pi坐标附近像素值已知,通过双线性差值得到pi′坐标像素值。以此类推,得到最终目标图像I′。

    92731

    SVG 图像入门教程

    上面代码,SVG 图像是100像素x 100像素高,viewBox属性指定视口从(50, 50)这个点开始。所以,实际看到是右下角四分之一圆。 注意,视口必须适配所在空间。...:5" /> 上面代码,标签x1属性和y1属性,表示线段起点坐标和纵坐标x2属性和y2属性,表示线段终点坐标和纵坐标;style属性表示线段样式。...: #dd524b" /> x属性和y属性,指定了矩形左上角端点坐标和纵坐标;width属性和height属性指定了矩形宽度和高度(单位像素)。...use>href属性指定所要复制节点,x属性和y属性是左上角坐标。...3.2 获取 SVG DOM 使用、、标签插入 SVG 文件,可以获取 SVG DOM。

    1.8K10

    前端-SVG 图像入门教程

    上面代码,SVG 图像是100像素x 100像素高,viewBox属性指定视口从(50, 50)这个点开始。所以,实际看到是右下角四分之一圆。 注意,视口必须适配所在空间。...:5" /> 上面代码,标签x1属性和y1属性,表示线段起点坐标和纵坐标x2属性和y2属性,表示线段终点坐标和纵坐标;style属性表示线段样式。...fill: #dd524b" /> x属性和y属性,指定了矩形左上角端点坐标和纵坐标;width属性和height属性指定了矩形宽度和高度(单位像素)。...属性和cy属性,指定了椭圆中心坐标和纵坐标(单位像素);rx属性和ry属性,指定了椭圆横向轴和纵向轴半径(单位像素)。...3.2 获取 SVG DOM 使用、、标签插入 SVG 文件,可以获取 SVG DOM。

    2.3K30

    python tkinter 设计指南

    比如 X表示沿水平方向填充,Y表示沿垂直方向填充,BOTH表示沿水平、垂直方向填充 text.pack() # INSERT 光标处插入;END 末尾处插入 text.insert(INSERT, '...当应用程序至少有一部分在屏幕是可见状态时触发事件 常用属性 属性 说明 widget 发生事件是哪一个控件 x,y 相对于窗口左上角而言,当前鼠标的坐标位置 x_root,y_root 相对于屏幕左上角而言...X/Y/BOTH/NONE,表示允许控件在水平/垂直/同时在两个方向上进行拉伸,比如当 fill = X 时,控件会占满水平方向上所有剩余空间。...xy 定义控件在根窗体水平和垂直方向上起始绝对位置 relx、rely 1....(40,40)和其大小(width,height) # 注意这里(x,y)位置坐标指的是标签左上角位置(以NW左上角进行绝对定位,默认为NW) Label1.place (x=40,y=40, width

    6.8K30
    领券