我想在文本框中输入一个小数点。我想通过在小数点后输入2位以上的数字来限制用户。我已经编写了在Keypress事件中实现这一点的代码。
function validateFloatKeyPress(el, evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
if (charCode == 46 && el.value.indexOf(".") !== -1) {
return false;
}
if (el.value.indexOf(".") !== -1)
{
var range = document.selection.createRange();
if (range.text != ""){
}
else
{
var number = el.value.split('.');
if (number.length == 2 && number[1].length > 1)
return false;
}
}
return true;
}
<asp:TextBox ID="txtTeamSizeCount" runat="server" onkeypress="return validateFloatKeyPress(this,event);" Width="100px" MaxLength="6"></asp:TextBox>
代码正在工作,但问题是:如果我输入".75",然后将其更改为"1.75"。唯一的方法是完全删除它,然后键入"1.75"。如果文本框中的小数点后已有2位数字,则会出现此问题。我强加的条件是
a) 小数出现后,必须至少有1或2位数字。对于ex.75或.7或10.75或333.55或333.2。而不是.753或12.3335
b)在小数之前,用户不必输入值。用户还必须能够输入整数。
你能告诉我可能是什么问题吗?
谢谢,
Jollyguy
你差不多到了。只需检查小数点后是否有超过2个字符。
UPDATE 1-检查克拉位置,允许在小数之前插入字符
更新2-纠正ddlab评论指出的问题,只允许一个点
function validateFloatKeyPress(el, evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
var number = el.value.split('.');
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
//just one dot (thanks ddlab)
if(number.length>1 && charCode == 46){
return false;
}
//get the carat position
var caratPos = getSelectionStart(el);
var dotPos = el.value.indexOf(".");
if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
return false;
}
return true;
}
//thanks: http://javascript.nwbox.com/cursor_position/
function getSelectionStart(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate()
r.moveEnd('character', o.value.length)
if (r.text == '') return o.value.length
return o.value.lastIndexOf(r.text)
} else return o.selectionStart
}
http://jsfiddle.net/S9G8C/1/
http://jsfiddle.net/S9G8C/203/
考虑利用HTML5的约束验证API。它不一定会阻止键入无效值,但该字段被标记为无效,并停止提交<form>
(默认情况下)。我添加了<output>
来说明为什么浏览器认为例如"1.100"是一个有效值(它认为数值为"1.1")
<input id="n" type="number" step=".01">
var
n = document.getElementById('n'),
o = document.getElementById('o'),
didInputN = function(e) {
o.value = n.valueAsNumber;
};
n.addEventListener('input', didInputN);
input:invalid {
color: white;
background-color: red;
}
<input id="n" type="number" step=".01">
<output id="o" for="n"></output>
从哲学上讲,您可能会认为这是一种更有用的方法,因为它允许用户粘贴无效条目并直接在字段中进行编辑。
您可以通过onchange事件的另一种方式来实现,不限制用户键入,而只是在键入后转换数字,以实现统一,比如
function validateFloatKeyPress(el) {
var v = parseFloat(el.value);
el.value = (isNaN(v)) ? '' : v.toFixed(2);
}
<input id="aninput" type="text" onchange="validateFloatKeyPress(this);" />
45.846
应该是45.85
,但在您的代码中,用户需要转换自己,然后他们将直接键入45.85
1.)No multiple decimals points.
2.)Two numbers after decimal point.
3.)Allow only Numbers and one decimal point(.).
这将有助于.js隐藏
function decimalValidation(el, evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
var number = el.value.split('.');
if(charCode == 8) {
return true;
}
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
//just one dot
if(number.length>1 && charCode == 46){
return false;
}
//get the carat position
var caratPos = getSelectionStart(el);
var dotPos = el.value.indexOf(".");
if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
return false;
}
return true;
}
function getSelectionStart(o) {
return o.selectionStart
}
嗨@webvitary以上代码也可以在IE中使用,请检查小数后退格在Mozilla中不起作用,我更新了我的答案。
这段代码非常完整,我将"."改为",":
- 不能在begin中使用","
无法写入更多","
<script type="text/javascript"> function isNumberKey(evt, el) { var charCode = (evt.which) ? evt.which : event.keyCode; var number = el.value.split(','); var caracter = el.value; if (charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } if (charCode == 44 && caracter == "") { return false; } if (charCode == 44 && caracter.indexOf(",") != -1) { return false; } //get the carat position var caratPos = getSelectionStart(el); var dotPos = el.value.indexOf(","); if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) { return false; } return true; } function getSelectionStart(o) { if (o.createTextRange) { var r = document.selection.createRange().duplicate() r.moveEnd('character', o.value.length) if (r.text == '') return o.value.length return o.value.lastIndexOf(r.text) } else return o.selectionStart } </script>
我的问题是,如果用户只允许2位小数,我需要它实时显示错误消息:
value = parseFloat(valueFromInput);
parseFloat(value.toFixed(2)) !== value // condition to check
上面的代码对我很有效。.toFixed
将浮点转换为只有2位小数的字符串,我必须转换回浮点以检查初始值是否相同。
附言:在这个条件之前,你应该检查这个值是否是NaN。