我可以隐藏HTML5数字输入的旋转框吗?

2020/09/18 23:31 · javascript ·  · 0评论

跨浏览器是否存在一种一致的方式来隐藏某些浏览器(例如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一种CSS或JavaScript方法来防止出现向上/向下箭头。

<input id="test" type="number">

该CSS有效地隐藏了Webkit浏览器的旋转按钮(已在Chrome 7.0.517.44和Safari版本5.0.2(6533.18.5)中进行了测试):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />

您可以始终使用检查器(Webkit,可能是Firefox的Firebug)来查找与您感兴趣的元素匹配的CSS属性,并查找Pseudo元素。此图显示了输入元素type =“ number”的结果:

输入类型=数字的检查器(Chrome)

Firefox 29当前增加了对数字元素的支持,因此以下是在基于Webkit和Moz的浏览器中隐藏微调框的代码段:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">

简短答案:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
<input type="number" />

更长的答案:

要添加到现有答案...

Firefox:

在当前版本的Firefox中,这些元素上的(用户代理)-moz-appearance属性的默认值为number-input将其更改为该值可textfield有效删除微调器。

input[type="number"] {
    -moz-appearance: textfield;
}

在某些情况下,您可能希望微调器最初处于隐藏状态,然后出现在悬停/焦点上。(这是Chrome当前的默认行为)。如果是这样,您可以使用以下方法:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>

铬:

在当前版本的Chrome中,这些元素上的(用户代理)-webkit-appearance属性的默认值已经为textfield为了消除微调,该-webkit-appearance属性的值需要被改变none::-webkit-outer-spin-button/ ::-webkit-inner-spin-button伪类(它是-webkit-appearance: inner-spin-button默认情况下)。

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
<input type="number" />

值得指出的是,margin: 0它用于删除旧版 Chrome 中的页边空白

当前,在撰写本文时,这是'inner-spin-button'伪类上的默认用户代理样式:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

根据Apple的移动Safari用户体验编码指南,您可以使用以下命令在iPhone浏览器中显示数字键盘:

<input type="text" pattern="[0-9]*" />

pattern\d*也可以工作。

尝试input type="tel"改为使用它弹出带有数字的键盘,并且不显示旋转框。它不需要JavaScript或CSS或插件或其他任何东西。

仅添加此CSS以删除数字输入上的微调器

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

我使用遇到了此问题,input[type="datetime-local"]类似于此问题。

而且我找到了一种克服此类问题的方法。

首先,您必须通过“ DevTools->设置->常规->元素->显示用户代理阴影DOM”打开chrome的shadow-root功能。

然后,您可以看到所有阴影DOM元素,例如对于<input type="number">,具有阴影DOM的完整元素为:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

输入的阴影DOM [type =“ number”

根据这些信息,您可以起草一些CSS来隐藏不需要的元素,就像@Josh所说的那样。

我找到了一个超级简单的解决方案

<input type="text" inputmode="numeric" />

大多数浏览器都支持此功能:https : //developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

不是您要的,但我这样做是因为带有Spinboxes的WebKit中存在焦点错误:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

它可能会给您一个想法,以帮助您解决所需的问题。

这是更好的答案,我想建议将鼠标悬停在上面并将鼠标悬停在上面

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

为了使它在Safari中起作用,我发现在webkit调整中添加!important会强制隐藏旋转按钮。

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

我仍然很难为Opera制定解决方案。

在适用于Ubuntu的Firefox上,只需使用

    input[type='number'] {
    -moz-appearance:textfield;
}

为我做了把戏。

新增中

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

会带我去

未知的伪类或伪元素“ -webkit-outer-spin-button”。由于选择器错误,规则集被忽略。

每次我尝试。内部旋转按钮相同。

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">

在基于WebKit和基于Blink的浏览器以及所有类型的浏览器中,使用以下CSS:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

当您不需要微调框时,可以将使用javascript输入的数字更改为文本输入;

document.getElementById('myinput').type = 'text';

并停止用户输入文本;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

然后让javascript将其改回,以防您确实需要微调器;

document.getElementById('myinput').type = 'number';

对于我的目的来说效果很好

我需要这个工作

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

额外的一行appearance: none对我来说很关键。

本文地址:http://javascript.askforanswer.com/wokeyiyincanghtml5shuzishurudexuanzhuankuangma.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!