" /> HTML 步进器中单位的显示 <input type="number">

HTML 步进器中单位的显示

2023-12-24

我希望用户输入带有“cm”、“kg”或“$”等单位的数字。这可以在 jQuery UI 中完成:Example http://jqueryui.com/spinner/#currency

但是,我想用纯html实现它,例如:

input{
  display: inline;
}

div.euro-sign::after{
  content: "€";
  margin-left: -40px;
}
<div><input placeholder="5 €" type="number" step="1"></div>

<div><input placeholder="5 €" type="number" step="1" unit="€"></div><!-- NOT working -->

<div class="euro-sign"><input placeholder="5" type="number" step="1"></div><!-- Workaround -->

是否有更原生的方法(例如示例 2)或者我是否必须实施解决方法(示例 3)?


$(".original input").on("change", function(){
    $(".duplicate input").val(this.value + '€');
});
$(".duplicate input").on("change", function(){
    $(".original input").val(this.value.substring(0, this.value.length - 1));
});
.duplicate {
    position: relative;
    top: -20px;
    left: 2px;
    float: left;
}
.duplicate input {
    width: 145px;
    border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="euro-sign">
    <div class="original">
        <input type="number" step="1"/>
    </div>
    <div class="duplicate">
        <input type="text" value="0€"/>
    </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 步进器中单位的显示 的相关文章

随机推荐

  • Rails - 通过功能测试测试 JSON API

    我只是一个简单的问题 但我找不到任何答案 我的 ruby on Rails 3 2 2 应用程序有一个带有设计会话身份验证的 JSON API 我的问题是 如何通过功能或集成测试来测试此 API 有没有办法处理会话 我没有前端 只有一个可以
  • Android 中的 AudioRecorder 错误缓冲区大小无效

    我需要同时录制和播放音频 我使用 2 个线程的帮助 这是代码 recorder new AudioRecord AudioSource MIC 8000 AudioFormat CHANNEL CONFIGURATION MONO Audi
  • 对于数据框中的每一行,根据日期范围创建多行[重复]

    这个问题在这里已经有答案了 我有一个如下所示的数据框 Name StartDate EndDate A 12 12 2012 12 15 2012 B 11 11 2012 11 14 2012 对于上面的每一行 我想生成带有名为 日期 的
  • 如何将图像分成 9 个小图像(类似于拼图)

    所以 我尝试创建一个小益智游戏 目前看起来像这样 顶部是拼图 您可以在其中放置从页面底部起 1 行 可滚动 的表格中选择的棋子 问题是这些是从原始图像中剪下来的 9 张单独图像 我只想只有一张图像 大图像 并以与本文上图中类似的方式将它们放
  • 如何在 C# 中安全地将 System.Object 转换为“bool”?

    我正在提取一个bool来自 非通用 异构 集合的值 The as运算符只能与引用类型一起使用 因此不可能使用as尝试安全转换bool This does not work The as operator must be used with
  • 如何在抓取网站时到达最后一页后停止 selenium webdriver?

    网站上的数据量 页面数 不断变化 我需要抓取循环分页的所有页面 网站 https monentreprise bj page annonces 我尝试过的代码 xpath id yw3 li 12 a while True next pag
  • 如何从 VB.NET 对话框中获取值?

    我有一个 frmOptions 表单 其中有一个名为 txtMyTextValue 的文本框和一个名为 btnSave 的按钮 用于在单击时保存并关闭表单 然后 当单击主窗体 frmMain 上的按钮 btnOptions 时 我将显示此对
  • 每次我到处使用 struct 而不是 class 时,我会杀死一只小猫吗?

    struct默认情况下是公开的 而class默认情况下是私有的 让我们以 Ogre3D 为例 如果我改变一切class发生与结构 它编译 我猜 并且引擎像以前一样工作 如果我是对的 编译后的代码与以前完全相同 因为只有编译器检查私有 受保护
  • 如何使用console.log(Javascript)打印函数的输出[重复]

    这个问题在这里已经有答案了 以下代码的意思是打印带有名称的名称字符串 然而 这是不正确的 var nameString function name return Hi I am name nameString Amir console lo
  • 如何在一块玻璃上绘制多个矩形?

    我正在尝试在玻璃板上绘制一系列矩形 如中所述here http docs oracle com javase tutorial uiswing components rootpane html glasspane 问题是 窗格中仅显示列表中
  • Python 打印参数结束

    如何在使用 end 时从输出中删除最后一个 add gt 我在这里没有使用 sep bcoz sep 在这里不会有任何效果 因为 print 语句在这里一次只打印 1 项并以 incr 结尾我的 def fibonaci num n if
  • Google Protocol Buffers,如何处理多种消息类型?

    是否可以获得序列化的Protocol Buffer消息的Type 我有这个例子 option java outer classname ProtoUser message User required int32 id 1 required
  • 在ES6中,如何检查对象的类?

    在ES6中 如果我创建一个类并创建该类的对象 如何检查该对象是否是该类 我不能只用typeof因为物体仍然 object 我只是比较构造函数吗 Example class Person constructor var person new
  • Visual Studio 2012 最新项目丢失

    在 Windows 任务栏和开始菜单中 最近打开的项目 解决方案列表为空 然而 在VS中 常规选项被标记为显示10个项目 该列表曾经显示 但最近我发现它消失了 有任何想法吗 我遇到了完全相同的问题 但我感觉其他菜单项也丢失了 我所做的是进入
  • 捕获组引用+数字

    例如 我想用第一个捕获组替换字符串1附加到它 我想要做 11 解释为 1 and 1 但这并不适用于所有口味 我该怎么办 信息位于视网膜链接 https github com mbuettner retina你提供的说 在引擎盖下 它使用
  • 四倍精度特征值、特征向量和矩阵对数

    我正在尝试以四倍精度对矩阵进行对角化 并取它们的对数 有没有一种语言可以使用内置函数来完成此任务 请注意 标签中的语言 包还不够 存在以下缺陷 Matlab 不支持四精度 Python NumPy SciPy 数据类型为 float128
  • 使用什么算法/方法来同步多个视频播放器

    动机 我目前正在尝试同步两个联网的 raspi 上的两个视频 我尝试从桌面 http 和 udp 进行实时流式传输 但每个 raspi 仍然以明显的延迟打开流 接下来我尝试在 raspi 上安装 vlc 并与桌面 vlc 同步 但这也不起作
  • 如何从 PHP 日期时间获取 unix 时间戳?

    我正在尝试使用 PHP 获取 unix 时间戳 但它似乎不起作用 这是我尝试转换为 unix 时间戳的格式 PHP datetime 2012 07 25 14 35 08 unix time date Ymdhis strtotime d
  • 如何在 Linux 上拦截来自 USB 设备的消息?

    我有一个流行的绘图板 我用 USB 连接到我的电脑 连接后 平板电脑会检测手部动作并相应地操纵指针 在某个地方 平板电脑正在将这些数据传输到我的计算机 我的目标是拦截这些传输并在处理数据后操纵鼠标 我发现的流行语是 设备驱动程序 and H
  • HTML 步进器中单位的显示

    我希望用户输入带有 cm kg 或 等单位的数字 这可以在 jQuery UI 中完成 Example http jqueryui com spinner currency 但是 我想用纯html实现它 例如 input display i