热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTMLmaxlength属性不适用于chrome和safari?-HTMLmaxlengthattributenotworkingonchromeandsafari?

<inputtypenumbermaxlength5nametechforge_apartmentbundle_sear

This is my HTML, taken with firebug (on chrome).

这是我的HTML,用firebug(在chrome上)。

I am allowed to write as much as characters as I want in the form field - in Chrome and Safari.

我可以在表单字段中编写尽可能多的字符 - 在Chrome和Safari中。

When on Firefox or IE10, the limit is fine.

在Firefox或IE10上,限制很好。

I haven't found this issue around on the net.

我没有在网上找到这个问题。

Note: type="number" - not text.

注意:type =“number” - 不是文本。

Anyone saw this issue before?

有人以前见过这个问题吗?

6 个解决方案

#1


27  

Use the max attribute for inputs of type="number". It will specify the highest possible number that you may insert

对于type =“number”的输入使用max属性。它将指定您可以插入的最高编号

  

if you add both a max and a min value you can specify the range of allowed values:

如果同时添加最大值和最小值,则可以指定允许值的范围:

  

See this example

看这个例子

EDIT

编辑

If, for user experience, you would prefer the user not to be able to enter more than a certain number, use Javascript/jQuery, as seen in this example

如果为了用户体验,您希望用户不能输入超过一定数量的数字,请使用Javascript / jQuery,如本例所示

#2


15  

The maxlength attribute does not apply to an input of type="number"

maxlength属性不适用于type =“number”的输入

From W3 HTML5 spec concerning type="number"

从关于type =“number”的W3 HTML5规范

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, size, src, and width.

不得指定以下内容属性,并且不适用于该元素:accept,alt,checked,dirname,formaction,formenctype,formmethod,formnovalidate,formtarget,height,maxlength,multiple,pattern,size,src和width。

Source: http://dev.w3.org/html5/spec/Overview.html#number-state-type-number (under Bookkeeping details)

来源:http://dev.w3.org/html5/spec/Overview.html#number-state-type-number(在簿记详情下)

In FF and IE, the input is falling back to be a text input and therefore, maxlength applies to the input. Once FF and IE implement type="number", they should also implement it in a way where maxlength does not apply.

在FF和IE中,输入回退为文本输入,因此maxlength适用于输入。一旦FF和IE实现type =“number”,它们也应该以maxlength不适用的方式实现它。

#3


5  

Max length will not work with the best way i know is to use oninput event to limit the maxlength. Please see the below code.

最大长度不适用于


#4


4  

For those who still can't get it to work... Try this to fire up the fatter number pads:

对于那些仍然无法让它工作的人...尝试这个来启动更胖的数字垫:


And the js:

和js:

$('input[name="no1"]').keypress(function() {
    if (this.value.length >= 1) {
        return false;
    }
});

#5


2  

Here is an example using type="number" and maxlength, that works with Chrome, IE and others. Hope it helps!

以下是使用type =“number”和maxlength的示例,该示例适用于Chrome,IE等。希望能帮助到你!




    
        
        
    

    
        
    


#6


1  

Speaking of HTML 4.01 there is no such type as "number". Speaking of HTML 5 FF and IE do not yet know the number type if http://www.w3schools.com/html5/html5_form_input_types.asp is correct.

说到HTML 4.01,没有“数字”这样的类型。说到HTML 5 FF和IE还不知道数字类型,如果http://www.w3schools.com/html5/html5_form_input_types.asp是正确的。

/edit: So FF and IE will probably fallback to text and this is why maxlength will work.

/编辑:所以FF和IE可能会回退到文本,这就是为什么maxlength会工作的原因。


推荐阅读
  • 如何使网页自适应电脑屏幕分辨率?
    在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。  第一种方法:做一个网页解决问题(长了点)  如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自 ... [详细]
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • 为了优化用户体验,本文探讨了如何调整下拉菜单的宽度。通过合理设置宽度,可以提升界面的美观性和易用性。文章提供了具体的代码示例,帮助开发者实现这一目标。例如,可以通过 CSS 或 JavaScript 来动态调整下拉菜单的宽度,确保其在不同设备和屏幕尺寸上都能保持良好的显示效果。 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析 ... [详细]
  • 在第10天的夜灵HTML日志中,我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性,但在旧版浏览器中的支持情况并不理想。然而,目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器,我们提供了多种解决方案,以确保网站在不同环境下的兼容性和用户体验。此外,我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]
  • CSS中的pointer-events属性详解与应用
    在CSS中,`pointer-events`属性是一个非常实用但常被忽视的功能。它主要用于控制元素是否响应鼠标事件。当一个元素覆盖在其他元素之上时,通过设置`pointer-events`属性,可以决定该元素是否能够接收鼠标点击、悬停等交互操作,从而实现更灵活的用户界面设计。例如,将`pointer-events`设置为`none`可以使元素透明地传递鼠标事件,方便实现复杂的叠加效果和交互逻辑。 ... [详细]
  • 开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ... [详细]
  • NX二次开发:UFUN点收集器UF_UI_select_point_collection详解
    本文介绍了如何在NX中使用UFUN库进行点收集器的二次开发,包括必要的头文件包含、初始化和选择点集合的具体实现。 ... [详细]
  • 本文介绍了如何在 ASP.NET 中设置 Excel 单元格格式为文本,获取多个单元格区域并作为表头,以及进行单元格合并、赋值、格式设置等操作。 ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 本文深入探讨了Ajax的工作机制及其在现代Web开发中的应用。Ajax作为一种异步通信技术,改变了传统的客户端与服务器直接交互的模式。通过引入Ajax,客户端与服务器之间的通信变得更加高效和灵活。文章详细分析了Ajax的核心原理,包括XMLHttpRequest对象的使用、数据传输格式(如JSON和XML)以及事件处理机制。此外,还介绍了Ajax在提升用户体验、实现动态页面更新等方面的具体应用,并讨论了其在当前Web开发中的重要性和未来发展趋势。 ... [详细]
author-avatar
ljp3044544
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有