现在谷歌浏览器和之前的Opera在"数字"类型的输入字段旁边显示"旋转框"控件.我希望能够设计这个样式,或隐藏它.有没有控制这个UI元素的方法呢？

例如: < - 带有向上和向下箭头的小ui元素.它不是那么实用,而是将未加入的元素添加到我创建的表单中.

我知道我不能将类型设置为"数字",但它允许内置防止输入除数字之外的任何内容,并且在语义上是正确的.

在Webkit浏览器中,输入[type = number]具有一个spinbox控件:

但是,Safari不遵循其他一些输入[type = number]规则,例如强制只输入数字字符.因此,Modernizr检测到Safari不支持输入[type = number].

我对数字输入宽度有非常特殊的需求,当有旋转框时,我制作宽度为2.7em而没有它(如在Firefox中),宽度只需要是1.7em.所以Chrome和Firefox都很好看.但Safari放入一个spinbox但不遵循任何其他规则,因此它获得1.7em宽度,如下所示:

我只关心是否有旋转控制器.我不关心Safari正在藐视的任何其他输入[type = number]规则.Safari是我唯一关心的规则.我怎么检测到？

Chrome最近更新了其输入元素样式.我非常喜欢number输入类型,但是它们的新风格为我们提供了圆形按钮,这些按钮不能完全适合方形输入框.

我已经多次尝试让这些输入改变,但他们不会让步.从它input[type='number']自己到这些按钮:

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    border-radius: none !important; background: black; color: red;
}

input:-webkit-autofill { background: black; color: red; }

看起来他们可能根本无法改变.有任何人对此有经验吗？我知道有一种隐藏按钮的方法.理想情况下,我只想删除它们的边界半径.

有趣的是,填充似乎适用于这些按钮.我知道他们在听!

我之前在这里看过这个问题我可以隐藏HTML5数字输入的旋转框吗？,有些人已经询问了浏览器的具体请求,在我的情况下我想知道的是:有没有办法创建一个css类,.no-spin以隐藏浏览器中的旋转箭头？

我试过了:

.no-spin {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

但是没有运气,事实上我对css的了解并不多.

我的王国是一个可选择的文本框

挑战:

创建"任意"类型的跨浏览器文本框/输入字段,可以在单击/点击时选择其内容.

多年来一直困扰着许多问题.

问题:

使用触摸设备tap时,鼠标使用事件时会触发click事件.在Apple设备上,点击事件不会触发onclick或onfocus.这不是一个Safari的具体问题,因为谷歌Chrome浏览器对苹果设备,但同样的问题不是在Android设备上.苹果设备处理点击事件的方式明显不同.

选择文本的标准方法是简单地使用:

$('input').focus(function () {
  $(this).select();
});

堆栈溢出中提到的另一个选定的工作是:

$('input').focus(function () {
  this.select(); //no jquery wrapper
}).mouseup(function (e) {
  e.preventDefault();
});

两者都运行良好,但都不适用于苹果设备.

我找到的唯一可行解决方案是根据这篇文章创建一个选择范围.这是纯粹的JavaScript,效果很好.

$('input').click(function () {
  document.getElementById('ID').selectionStart = 0
  document.getElementById('ID').selectionEnd = 999
});

主解决方案

凭借这些知识,我想出了一个我自己的组合解决方案.

$('.Select').focus(function () {
  this.select();
  this.setSelectionRange(0, 9999);
}).mouseup(function (e) {
  e.preventDefault();
});

重新审视问题

这是一个长期存在的问题,我认为这个问题已经解决但现在我们已经到了2016年,问题就像行尸走肉一样从地球上升起.

该规范现在明确指出:

您不能在'HTMLInputElement'上使用'setSelectionRange':输入元素的类型('number')不支持选择.

因此,主代码将不再适用于Apple设备的数字字段.

在这里,我们又来了,是时候让一些赏金猎人参与此案了!

重要的附加信息:我讨厌苹果.

$('.Select').focus(function () …

我想知道是否可以覆盖浏览器步骤行为或在步骤之前拦截和更改步骤值,或者防止步进作为输入类型编号的函数发生.

例如,当使用向上和向下递增/递减箭头/滚动步进等递增时,我想在它发生之前操纵步进过程.

例如:

<input type="number" min="1.01" max="1000" id="num"/>

我试着不给步骤属性.这没用.

Step属性只接受值'all'和数字,不带false.

所以我无法使用任何属性禁用它.我也尝试过使用stepUp,stepDown函数但是当浏览器步骤函数发生时不会调用它.

我基本上想要它不要完全步进或者如果它执行步骤,然后执行自定义步骤功能,其中我根据其当前值确定步长值.

我尝试修改更改,但这似乎不适用于当前步骤,仅适用于下一步.

这是javascript:

$("#num").on("keyup change focusin focusout", function (e) {
    $(this).attr("step", getStep($(this).val()));
});

function getStep (val) {
    val = parseFloat(val);
    var step = 1;
    if (val < 5) {
        console.log('here');
        step = 2;
    }  else if (val < 10) {
        step = 5;
    }
    return step;
}

http://jsfiddle.net/urrLmm4L/

如果我输入5,它应该增加5,但它增加1.下一次增加5.我想在步进之前覆盖步长值,如果可能的话.

我不是试图通过使用文本输入来解决这个问题,我试图确定是否有一种方法来覆盖步进功能.

我有一个网络应用程序,其布局设置为与移动设备一起使用.但是,表单中的大多数输入字段都是数字.

每次我使用Android手机访问表单并单击其中一个输入字段以创建输入字段时,qwerty会出现,我必须切换到数字输入法并输入一些数字.这很不方便.

是否有HTML属性或某事物.类似的将使Android(和iPhone)显示数字键盘作为默认值？

同样,这是一个Rails应用程序,而不是本机智能手机应用程序.

任何帮助表示感谢,谢谢.

我想知道我可以使用哪种类型输入电话号码。

当我这样做时，我可以输入字母：

<input type="tel" id="phone" name="phone"  required>

另外，我想删除右边的那个箭头：

<input type="number" id="phone" name="phone"  required>

我想要的是只输入电话号码的输入。

我的十进制 ModelForm 字段在增加/减少字段值的字段中显示为“向上/向下箭头”。

关于如何删除/隐藏这些箭头的任何反馈？

形式：

class PriceAssessment1Form(forms.ModelForm):
    class Meta:
        model = Component
        fields = ['size_height','size_width','size_length','weight','base_material_price']

模型

class Component(models.Model):

    name = models.CharField(max_length=255)
    created_date= models.DateTimeField(default=datetime.now)
    user = models.ForeignKey(User)
    price_assessment_started = models.BooleanField(default=False)

    size_height = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)
    size_width = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)
    size_length = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)

    weight = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)

    base_material_price = models.DecimalField(null=True,blank=True, max_digits=9, decimal_places=2)

模板

<form action="{% url 'portal_price_assessment' component_id %}" method="post"> {% csrf_token %}
            <div>
                <div>size_height {{ form.size_height }}</div>
                <div>size_width {{ form.size_width }}</div>
                <div>size_length {{ form.size_length }}</div>
                <div>weight {{ …

我想删除所有与类型时间关联的webkit内容（chrome）。我不想更改类型。

<input type="time">

http://jsfiddle.net/dDqX4/

我发现了类似的问题，删除了Webkit的内容。

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

谢谢！

更新：
Chrome

IE浏览器

如您所见，chrome破裂了。

我尝试过各种各样的东西,却找不到有用的东西.我以为它会是这样的:

input[type="date"] {
    -webkit-appearance: none;
}

但这没效果.有谁知道如何删除它们？

有什么办法可以删除输入（type =“ number”）中的这些？

<input type="number" />

供用户输入他们的电话号码。

这个