如何在输入框达到一定距离(以像素为单位)后停止扩展输入框的宽度？
在前端开发中，可以通过监听输入框的输入事件来实现在输入框达到一定距离后停止扩展输入框的宽度。具体的实现步骤如下：
- 首先，给输入框添加一个输入事件的监听器。
- 在监听器中，获取输入框的内容长度，并与设定的距离阈值进行比较。
- 如果输入框的内容长度超过了设定的距离阈值，就停止扩展输入框的宽度。
- 可以通过修改输入框的样式或设置输入框的最大宽度来实现停止扩展输入框的效果。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.input-box {
width: 100px; /* 初始宽度 */
max-width: 200px; /* 最大宽度 */
}
</style>
</head>
<body>
<input type="text" class="input-box" id="myInput" />
<script>
const inputBox = document.getElementById('myInput');
const distanceThreshold = 100; // 距离阈值，单位为像素
inputBox.addEventListener('input', function() {
const contentLength = inputBox.value.length;
if (contentLength > distanceThreshold) {
inputBox.style.width = distanceThreshold + 'px'; // 停止扩展输入框的宽度
}
});
</script>
</body>
</html>在这个示例中，输入框的初始宽度为100px，最大宽度为200px。当输入框的内容长度超过设定的距离阈值100px时，输入框的宽度将停止扩展，不再增加。你可以根据实际需求调整阈值和样式。
腾讯云相关产品和产品介绍链接地址：暂无推荐的腾讯云相关产品和产品介绍链接地址。
相关·内容
希望有人能为我解释清楚这件事...
我有一个jquery UI滑块，它需要很高的数字(例如0- 600,000)。当step选项设置为1(默认设置)时，我看到滑块返回的数字不是1的增量/减量(在0- 600,000的示例中，我得到的增量是508)。
我感觉这是意料之中的行为，然而，我需要理解为什么会发生这种情况(我不是一个很好的数学家！)以便弄清楚如何让它按照我的目的工作。
有谁能帮帮我吗？C.f.下面的代码-我使用的是range选项：
$( "#slider-range" ).slider({
range: true,
min: 0,
浏览 0提问于2013-01-16得票数 1
回答已采纳
我正在尝试添加一些应该始终处于相同位置的输入框，但当我在我的macbook中查看网页时，输入框的位置与我用更大的显示器查看时的位置不同。解决这个问题的最好方法是什么？下面是我或多或少想要做的事情。 <input name="arrive" type="date" placeholder="Arrival date:">
input[name="arrive"] {
position: absolute;
width: 16.9em;
top: 18vw;
left: 15vw;
}
浏览 23提问于2019-01-17得票数 0
3回答
我试着理解这些代码：
/*
* File: BouncingBallWalls.java
* ---------------------
* This is exercise 15 in chapter 4 of "The Art and Science of Java."
* It requires me to write a program that makes an animated bouncing
* ball on the screen, bouncing off the window edges.
*/
import java.awt.*;
浏览 3提问于2014-01-30得票数 0
我从包含对象的图像中根据pixel计算了对象的大小。我想测量真实世界中的物体大小。有没有办法找出乘积因子来衡量实际的尺寸？我目前正在使用python来实现。
浏览 6提问于2017-02-04得票数 5
回答已采纳
1回答
Opengl Es线厚
、、、
我在opengl es中给android画了一条线。这条线画得很好。唯一的问题是，无论相机离它有多近或多远，线的厚度都是一样的。有什么解决办法吗？
浏览 3提问于2014-06-30得票数 4
回答已采纳
我需要使用Openlayers来引用一个非地理参考的图像。我找到了一个很棒的，它展示了我如何做到这一点，但有些事情我无法理解：
如何计算源代码中的"theResolution“变量(第130行)？
浏览 2提问于2014-05-17得票数 2
回答已采纳
我们将使用美国季度作为我们的参考对象，并贯穿所有示例
我需要确定我们的“每公制像素”比率，它描述可以“适应”到给定的英寸、毫米、米等数量的像素数。
我需要的输出应该如下所示：
浏览 0提问于2018-07-25得票数 0
在Python3.9中使用Tkinter，为什么这会提高bad geometry specifier "140mx120m"
import tkinter as tk
window = tk.Tk()
window.geometry('140mx120m')
没有毫米单位m，它的工作很好，但我必须转换为像素。
例如，和建议它应该能工作。我遗漏了什么？
浏览 10提问于2021-03-18得票数 0
回答已采纳
1回答
目前我正试图开发一款2D游戏。从图片中可以看到，尽管我的最小顶点距离设置为0.1，但我的路径是锯齿状的。我的播放器是通过Update()方法移动的。
有什么建议可以让它看起来像最底层的画面吗？
编辑：
浏览 2提问于2017-05-22得票数 0
回答已采纳
我想测量在上传的html代码的图像上绘制的线的长度。我已经找到一个脚本，使用画布元素，使我能够绘制一条线，矩形或自由线。我想实现的下一步是能够在上传的图像上绘制一条线，矩形或自由线，但如果我选择绘制一条线，以便有可能通过手动设置比例来测量一条线的长度。
我知道在js中有字符串string.length，但它不适合我的目的。下面是我找到的两个代码，我试图修改和放在一起，但没有任何成功，即使我不是很实用。如果有人能帮我把这两个代码放在一起，或者给我一些建议，我将不胜感激。
这是用于在矩形中绘制的html代码
<!DOCTYPE html>
<html lang="en&#
浏览 0提问于2020-06-25得票数 1
1回答
我正在构建一个Android应用程序，用户必须触摸屏幕上的一个圆圈，我需要记录用户的触摸距离圆心有多远。
问题是，我想记录物理距离，而不是像素距离，因为我要在很多设备上运行这个应用程序，我希望所有的结果都是一致的。例如，如果用户从圆心的触点距离为15 up，这可能是一个设备上0.5cm的物理距离，另一个设备上的物理距离为1cm (只是由这些数字组成，但您知道了)。所以我只能依靠物理测量，而不是像素。
那么，我应该如何记录触摸距离呢？View.onTouchEvent方法给出了以像素为单位的触摸事件的x和y(我假设)，那么我是否只是从圆心到触摸之间的像素距离，然后将其转换为 dp (并将所有结
浏览 6提问于2012-11-20得票数 0
1回答
什么是数据集边界框？
、、、、
我对成像有点陌生，我想了解以下几点：
数据集的边框是什么?为什么需要？它是真实世界中的测量，还是仅仅是显示在电脑屏幕上的测量？这与以像素为单位指定的图像大小有什么关系？，，WMTS层，缩放级别和矩阵集意味着什么？我理解WMTS是通过获取数据集的块来工作的。此外，我还看到特定WMTS数据集的get功能返回XML中的返回矩阵集，而我不使用understand?what来处理矩阵数据集和缩放级别，以及如何将它们理解为外行？
我已经尝试过在谷歌上搜索一些内容，但这些文章似乎已经假定了一些技术知识，我正在尝试收集这些知识。
浏览 1提问于2019-10-09得票数 0
1回答
我正在尝试获取通过iText (使用Java)保存到PDF文件中的扫描图像的信息。
使用，我得到宽度和高度(通过矩阵，或通过BufferedImage)。这个想法是用来计算新闻部，但我有点迷路了。
这些值(宽度和高度)是否以像素或点为单位？还有其他方法可以做到这一点吗？关于如何缩放图像并将其保存到PDF文件中，有很多答案，但我没有找到任何关于如何读取图像的宽度/高度/比例尺的答案，并且对结果充满信心。
浏览 8提问于2014-08-28得票数 3
回答已采纳
1回答
我试着让两个并排的图形占据我屏幕的一半(分辨率1600)。Matplotlib定义数字大小(以英寸和每英寸点为单位)。我如何使用这些来制作每个810像素，两者之间有什么区别吗？
fig, ax = plt.subplots(figsize=(8,4), dpi=100)
fig, ax = plt.subplots(figsize=(4,2), dpi=200)
浏览 4提问于2015-04-20得票数 3
<div class="narrow heading">Heading</div>
<div class="narrow">Description goes here</div>
.narrow{
margin-left:5em;
margin-right:5em;
}
.heading{
font-size:36px;
}
为什么要增加标题的字体，把它移到更远的地方？
如果我在CSS中用165 px替换12 em，就会达到预期的效果。但是，该网站将不会出现在不同的窗口大小的需要。
浏览 4提问于2013-12-20得票数 0
回答已采纳
我正在编写一个脚本，它在桌面上不同的位置打开两个边界不同的Safari窗口，如下所示：
{像素宽，像素高}标签比实际的框比例更精确。我遇到的问题是，我可以按我想要的方式设置左边窗口的边界--这是脚本生成的第一个窗口--但是当我试图指定右边第二个窗口的边界时，它的位置被绑定在第一个窗口的位置上，它要么被限制在第一个窗口的范围内，要么--如果我让它在第一个窗口的边界之外“产卵”--根本就不会出现。
# Desktop: {1280, 800}
tell application "Safari"
activate
make new document wit
浏览 0提问于2020-05-15得票数 1
回答已采纳
最近我看到一些关于Kinect传感器噪声模型建模的论文，作者说他们将噪声分为两类:轴向噪声和横向噪声。.Here是一位，展示了他们的breif想法。
我是这个领域的新手，对此一无所知，我希望有人能给我一个明确的解释。提前谢谢。
浏览 0提问于2016-11-15得票数 0
3回答
是否有办法阻止所有元素-Div，表，图像等的收缩。这样，当浏览器变得更小时，用户就不得不四处滚动才能看到页面？
示例：
在我的包装类中，我尝试了如下各种方法：
width: 100%;
min-width:100px;
width: auto
位置相对；
我的工作是第一次调整浏览器的大小，但是在第二次调整之后，所有的内容都缩小了
浏览 8提问于2014-04-26得票数 3
回答已采纳
2回答
我知道"useragent.js“和”用户代理-utils 1.8“用于识别用户端浏览器、操作系统、移动设备等的类型。
我们能否使用用户代理类库来识别屏幕的分辨率/大小(以像素为单位)？
提前谢谢。
浏览 4提问于2013-08-01得票数 0
回答已采纳
假设我知道相机和物体之间的距离。在现实世界的测量中，我如何知道每个像素的宽度对应于什么(例如厘米/毫米)。
用于焦距为x mm的NxM分辨率图像。对于距离相机D的平面对象(假设是正方形)，如何在相机校准后测量以毫米或厘米为单位的正方形宽度。另外，如何找到像素宽度与真实世界宽度(cm/mm)的对应关系？
有没有人能详细解释一下校准程序的步骤和算法来获得这个结果？
浏览 0提问于2017-11-01得票数 0
1回答
这是我的问题的一个例子。地图元素顶部有导航。现在，当您单击一个标记时，地图将被平移到标记的坐标上，并且信息窗口的顶部很可能在足够大的时候无法读取。
我想要的是将地图平移到标记上方的位置，这样信息窗口就会下降，并且不会被导航遮挡。理想情况下，它会落在可见区域的正中。
问题是，当地图在远处放大时，我需要把它的数量缩小到比放大远的地方小得多。我的数学似乎不太正确。
这是处理摇摄的代码的一部分：
infowindow.open(map, marker);
var K = 0; // this should be something depending on the zoom level
var l
浏览 4提问于2014-09-22得票数 1
回答已采纳
2回答
绘制R中的坐标
、、、
我有许多坐标，我想用R将它们绘制在网格界面上。问题是观察值之间的相对距离很大。坐标在地理坐标系中，研究区域是瑞士。此外，需要绘制点的id。
问题是两个点的集群是密集的，而其他一些点是以很大的距离分开的。我如何以适当的方式绘制它们，以获得可读的演示文稿？对绘制数据有什么建议吗？
最好不要像我以前使用过的那样使用ggplot，它不会显示正确的结果。
数据：
id x y
2 7.1735 45.86880001
3 7.17254 45.86887001
4 7.171636 45.86923601
5 7.18018 45.87158001
6 7.17807 45.87014001
7 7.1
浏览 0提问于2013-01-22得票数 1
1回答
我尝试过以下问题的解决方案，但似乎没有一个有效：
在最后一个问题中，高度和宽度都是在CSS中指定的，但是我只想指定一个维度。例如，目前我的CSS中有一个max-height，它控制图像的高度。
下面是我的代码：
HTML
<a href='#schedule'>
<img src='images/calendar.svg' alt='' role='presentation' class='nav-item-icon'>
<span class
浏览 4提问于2014-07-03得票数 1
3回答
列宽是以不同的方式指定的(星号，自动等)如何获取特定列的像素宽度？
GridLength l=tip.basis.ColumnDefinitions[0].Width;
浏览 2提问于2013-02-16得票数 5
1回答
我试图找出一些在python中使用枕头的文本的大小(点)。据我所知，各点的字体大小对应于目标显示器或表面上的真实物理英寸，每英寸72个点。当我使用Pillow的textsize方法时，我可以找到以给定字体大小(以点为单位)呈现的某些文本的像素大小，但不知道如何返回以英寸为单位的坐标系，因为我没有(也无法设置)图像的像素密度：
from PIL import Image, ImageFont, ImageDraw
image = Image.new('RGBA', (400, 300), (255, 255, 255))
font = ImageFont.truetype(
浏览 0提问于2019-03-12得票数 1
1回答
我需要在我的Google Map v3上有一个自定义控件，这样我就可以在GoogleTV上控制dpad导航的焦点。我正在寻找一种方法，以平移与每一次点击的方向arrows...just喜欢的内置panControl。是否有向右、向左、向下和向上平移的公共方法？
浏览 3提问于2011-12-02得票数 2
回答已采纳
1回答
在这个例子中，有没有办法将CSS动画停止到屏幕上的某个固定点？例如，它正在移动，我决定让它从屏幕右上角开始停止，大约20px。仅仅使用CSS就可以做到吗？ .bird {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fl
浏览 39提问于2019-09-17得票数 1
回答已采纳
我试图在一个网站中实现一个部分，即一些绝对位置指示符与ReactJS放在一个相对位置时间线上，所有的一切都很好，直到我在浏览器上放大/缩小该网站。下面是一个很小的例子来描述这个问题：
时间表：
import "./App.css";
function App() {
return (
<div className="timeline">
<div className="indicator one"></div>
<div className="indicato
浏览 7提问于2022-06-07得票数 3
回答已采纳
据我所知，DataGrid自动调整列的大小。我想要的是DataGrid尊重我设置的列宽，并相应地显示水平滚动体。有办法做到这一点吗？
浏览 1提问于2014-12-24得票数 1
回答已采纳
1回答
我有一张人眼的照片，用手机拍摄了大约10厘米的，(没有相机的规格)。经过一些检测和轮廓处理，得到了113 as 作为检测虹膜中心到图像上虹膜最外层边缘之间的欧几里德距离。图像尺寸：483x578px。
我尝试将像素转换成mm，只需将像素的数目与像素的大小相乘，因为1px大致等于0.264mm，只有当图像在1:1比wrt与实时眼睛的比例为1:1时，才能给出合适的长度，这不是这样的情况。
编辑：
使用设备: One Plus 7T
视距= 117度
孔径= f/2.2
距离摄影= 10厘米(约)
问题：
是否有一种最佳的方法，通过处理到目前为止收集到的大量信息，并且不包括图像中的一个参考对象，来找
浏览 3提问于2022-08-05得票数 0
回答已采纳
1回答
我正在构建一个图像的金字塔。首先，我拍摄一张大图，并构建一个更小的，以此类推。我使用插值来缩小图像。我需要了解在什么插值下，图像之间的信息丢失会更少。这就是我所说的插值质量。我看的是水平梯度。请告诉我这个标准有多好，或者有没有更好的东西。
Blurred = imfilter(img, PSF);
Blurred = im2double(Blurred)
Blurred2 = imresize(Blurred, [300 300], "Method", "bicubic");
[x0,y0] = meshgrid(1:360,1:360);
[x, y] = m
浏览 0提问于2020-09-09得票数 1
2回答
在我正在编写的程序中，我需要鼠标在窗体左上角的绝对位置。我使用的是以下代码：
Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Debug.Print "x: " & X & " - y: " & Y
End Sub
当我使用这段代码时，左上角的坐标是0,0。但问题是，当我在表单中移动时，这些值要大15倍。
这就是我使用的原因：
Private Sub Form_MouseMove(Button A
浏览 0提问于2012-11-02得票数 0
回答已采纳
1回答
当我点击一个带有动画的按钮到一定距离时，我试着向下滚动页面，目前，我能够向下滚动到某个元素，但这不是我想要的，我想向下滚动到一定的距离(以像素为单位)。
我尝试了很多不同的方法，但在我的情况下，它们似乎不起作用，至少不是我想要的那样。
总之，这是密码：
$(document).ready(function(){
$('.next_section').click(function(){
$('html, body').animate({
scrollTop: $('.img_div').offset()
浏览 3提问于2017-11-04得票数 3
回答已采纳
我一直在尝试使用nativescript，我发现它为我们提供了使用css设置元素样式的功能。
然而，在文档中，我没有看到任何关于css的度量单位的内容。
这是可行的
.title {
font-size: 30;
horizontal-align: center;
margin: 20;
}
这是行不通的
.title {
font-size: 30;
horizontal-align: center;
margin: 20px;
}
请注意，在第二个示例中，边距为20px。
所以我的问题是，当涉及到css时，nativescript使用什么单位
浏览 9提问于2015-12-29得票数 5
2回答
有没有办法在x/y轴上以像素为单位设置高库存的点间距？例如，数据点之间的距离应为5px。
另外，有没有办法将图表向左或向右移动？例如，将所有数据点向右或向左移动5px？
浏览 2提问于2014-12-30得票数 0
1回答
我正在阅读下面链接中的响应，并进入“屏幕单元”，但我无法找到Jim的回复中“屏幕单元”所指的确切内容。我知道它们不是像素。
浏览 8提问于2017-01-20得票数 6
1回答
基本上，我想从设备的角度取一条固定的直线，并确定是否有任何东西拦截它，但在我的例子中，我想使“激光线”可以配置为与视场顶部的距离有关的。
现在，只要这样做，就可以很容易地获得给定像素点的深度数据。
var depthInMM = DepthImagePixel.Depth;
简单地说，这也很简单，我想通过做这样的事情，从顶部聚焦于第100行像素。
for (int i = 0; i < this._DepthPixels.Length; ++i) //_DepthPixels.Length is obviously 307200 for 640x480
{
if (i >=
浏览 5提问于2014-04-28得票数 1
回答已采纳
1回答
我已经为列设置了table-layout: fixed，宽度和填充，但是每22px的实际宽度比它应该的要高。是什么导致了这种情况？
浏览 1提问于2012-12-15得票数 0
回答已采纳
返回几个具有类似名称的字段：
fontBoundingBoxAscent对actualBoundingBoxAscent
fontBoundingBoxDescent对actualBoundingBoxDescent
MDN文档不是很清楚，也没有提供可视化。他们之间有什么区别？
此外，作为后续，如何从这些值计算文本的高度？
浏览 13提问于2017-10-26得票数 3
我想知道System.Drawing.Rectangle的宽度和高度是否以像素为单位？我的打印机纸张宽度大于矩形面积，但纸张不容纳矩形面积。打印机纸的宽度是以像素为单位的，所以我认为如果我能将矩形宽度转换成像素，我就能准确地发现矩形宽度是否大于纸张，并可以据此调整矩形。
浏览 2提问于2014-01-07得票数 1
1回答
我有一个对象播放器-它正在移动FPS提前每次更新(基于设备FPS的更新)。根据我的结果，要在所有设备上获得相同的平均播放速度，就需要计算screenWidth / averageFPS。这应该给我速度，那个玩家达到移动屏幕宽度一秒(注意我的游戏是在景观模式)。但事实并非如此，它在Z3 Compact720x1280；avg上的速度要快得多。比平板电脑上的A5600-F (800x1280；avg.62)。
如何获得正确的速度？
浏览 0提问于2015-12-02得票数 1
2回答
我创造了一个在平地上滑行的正方形。
public class PlayerMoveScript : MonoBehaviour
{
float move = 0;
void Start (){}
void FixedUpdate ()
{
if (move == 0) {
move = Input.GetAxis ("Horizontal");
if (move != 0) {
move = 15*Mathf.Sign(move);
浏览 0提问于2014-03-26得票数 1
回答已采纳
1回答
在不使用点云库(PCL)的情况下，如何估计深度图像上I(i，j)点的表面法线(以mm为单位)？我已经通过了、和，但是我正在用C++标准库或openCV来寻找每个像素表面法线的简单估计。
浏览 3提问于2015-06-23得票数 6
回答已采纳
1回答
我正在使用一个简单的JavaScript。我改变了容器的高度和宽度。我认为我需要修复的JavaScript，因为它是在高度设置为px的容器上工作，但我已设置的高度为%。当你在容器的底部调整大小时(你看不到完整的img或者有太多的空间)，问题就出现了。
也许我错了..。有什么建议吗？
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[
浏览 3提问于2016-03-23得票数 2
因此，我在我的新iPad (4g)上尝试的第一件事当然是旧的示例。我所做的唯一修改是将目标设备设置为"iPad“。
然而，当在设备上运行时，in视图的界限被设置为768,1024，createFramebuffer中的"backingWidth，backingHeight“也是如此。
目测图像确认它仍然以768x1024的大小渲染。我错过了什么-我如何让它以本机分辨率呈现？
浏览 0提问于2012-03-19得票数 7
回答已采纳
1回答
我正在尝试使用HTML、CSS、JavaScript和一些图像在Android应用程序上构建一个覆盖流用户界面。
2009年Safari支持的CSS3D转换，以及自2.0版本以来的iPhone，在Android上都不支持。更糟糕的是，在Android2.1和Android2.2上实现都是错误的，而且每个版本都有不同的实现方式。
--知道我如何在Android web应用程序上使用HTML、CSS、JavaScript和一些没有CSS 3D转换的图像构建一个覆盖流用户界面吗？
浏览 2提问于2011-01-11得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
