标签: html-input

我需要让用户输入浮点数,所以我使用以下元素:

<input type="number" name="my_number" placeholder="Enter number"/>

在Firefox上运行得很好,但Chrome在我尝试输入小数时抱怨这个数字不是整数.这对我的案子来说是一个问题.如果我输入step属性,则Chrome会允许浮点数:

<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>

但后来问题是0.15无法进入......这step似乎不符合我的需要.在W3C规范整个的属性提到浮点数input type="number".

如何让Chrome接受没有step属性的浮点数？

如何以编程方式在HTML input字段中选择特定范围的文本？(我不想选择整个字段,只是一个子集)

另外,如何确定字段中当前选定的范围？

我正在尝试制作一个包含一个电子邮件输入,一个复选框输入和一个提交输入的html5表单.我正在尝试使用模式属性进行电子邮件输入,但我不知道在此属性中放置什么.我知道我应该使用一个必须与JavaScript Pattern生产匹配的正则表达式,但我不知道如何做到这一点.

我试图让这个属性做的是检查以确保电子邮件包含一个@和至少一个或多个点,如果可能,检查@后面的地址是否是真实地址.如果我不能通过这个属性做到这一点,那么我将考虑使用JavaScript但是为了检查一个@和一个或多个点,我确实想要使用pattern属性.

pattern属性需要检查:

1. 只有一个 @
2. 一个或多个点
3. 如果可能的话,检查@后面的地址是否是有效地址

这个的替代方法是使用JavaScript但是对于所有其他条件我不想使用JavaScript

我已经看到了预选复选框的三种实现方式.我开始使用checked ="checked",因为我认为这是"正确"的方式(从来没有像"checked"="是"那样).我正在考虑更改为checked ="true",因为它似乎更易读并且更容易编写JavaScript代码.请注意,同样的问题适用于其他属性,例如"disabled"="disabled"与"disabled"="true".只要我一致,使用"真实"的首选方法？谢谢

<input type="checkbox" checked="checked" value="123" name="howdy" />
<input type="checkbox" checked="true"    value="123" name="howdy" />
<input type="checkbox" checked="yes"     value="123" name="howdy" />

就在最近,我注意到文本输入在Google Chrome中存在显示问题,但仅在文本为空时才显示.

请注意,在顶部图像中,当输入为空时,光标在文本输入中过高.

但是一旦我们输入了一些文字,它就会纠正自己:

JSFiddle来说明.可能需要谷歌Chrome版本:38.0.2125.101米

HTML:

<input name="tb_password" type="password" id="tb_password" class=" validate[required,custom[password]]" placeholder="Type your password here" autocomplete="off" style="
    margin: 0;
    line-height: 46px;
">

CSS:

input[type="text"], input[type="password"] {
width: 100%;
height: 46px;
line-height: 46px;
font-size: 11pt;
color: #555 !important;
text-indent: 15px;
border-top: solid 1px #c5c5c5;
border-left: solid 1px #c5c5c5;
border-bottom: solid 1px #dadada;
border-right: solid 1px #dadada;
background: #fff;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
}

我有一个移动网页,其中包含"文件"类型的输入元素,以允许用户将图像文件上传到服务器.该页面适用于iOS以及Chrome浏览器中的Nexus 4(Android 4.2.1).

当我使用三星S3(Android 4.0.4)和默认浏览器时,单击"选择文件"按钮会按预期打开图像选择对话框,但是在我选择图像并关闭对话框后,网页会刷新,所以我丢失所选的图像.有没有人见过这种行为？有关解决方法的任何建议吗？

我使用的输入元素是相当标准的,看起来像这样:

<input id="addPhoto" type="file" accept="image/*"/>

即使没有'accept'属性,我也会遇到同样的问题.

我刚刚研究过这个,不记得怎么做了.我希望能够阻止Firefox在页面内的某些输入字段上运行它的拼写检查功能.我知道这是可能的,但不记得如何设置它.

我的目标是观察输入值并在其值以编程方式更改时触发处理程序.我只需要它用于现代浏览器.

我尝试了很多组合使用defineProperty,这是我最新的迭代:

var myInput=document.getElementById("myInput");
Object.defineProperty(myInput,"value",{
    get:function(){
        return this.getAttribute("value");
    },
    set:function(val){
        console.log("set");
        // handle value change here
        this.setAttribute("value",val);
    }
});
myInput.value="new value"; // should trigger console.log and handler

这似乎做了我的预期,但感觉就像一个黑客,因为我重写现有的价值属性和玩value(属性和属性)的双重身份.它还打破了change似乎不喜欢修改属性的事件.

我的其他尝试:

• 一个setTimeout/setInterval循环,但这也不干净
• 各种watch和observepolyfill,但它们打破输入值属性

什么是获得相同结果的正确方法？

现场演示:http://jsfiddle.net/L7Emx/4/

[编辑]澄清一下:我的代码正在观看一个输入元素,其他应用程序可以推送更新(例如,由于ajax调用,或者由于其他字段的更改).我无法控制其他应用程序如何推送更新,我只是一个观察者.

[编辑2]为了澄清"现代浏览器"的含义,我对能够在IE 11和Chrome 30上运行的解决方案感到非常满意.

[更新]根据接受的答案更新了演示:http://jsfiddle.net/L7Emx/10/

@ mohit-jain建议的技巧是为用户交互添加第二个输入.

这是我在MVC 5中的代码:

@Html.EditorFor(model => model.myfloatvalue, new { @type = "number", @min = "0", @step = "0.01", @value = "0" })

这是html代码:

<input class="text-box single-line" data-val="true" data-val-number="The field Fix Amount must be a number." data-val-required="The Fix Amount field is required." id="myfloatvalue" name="myfloatvalue" type="text" value="">

不是

<input class="text-box single-line" data-val="true" data-val-number="The field Fix Amount must be a number." data-val-required="The Fix Amount field is required." id="myfloatvalue" name="myfloatvalue" type="number" min="0" step="0.01" value="0">

我该怎么办？
谢谢你的回复!

我正在尝试使表格可访问.我应该让我的输入双双disabled和aria-disabled属性,或只是一个？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" disabled>

或者像这样？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true">

或者像这样？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-disabled="true" disabled>