javascript 在 jquery 或 javacscript 中动态设置输入类型文本框的长度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23152746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamically set length of an input type textbox in jquery or javacscript
提问by Shivam
Get maximum 13 numbers in an input type text box but if user presses 14 number as decimal, only then it should allow maximum 16 numbers.
在输入类型文本框中获取最多 13 个数字，但如果用户按 14 个数字作为十进制数，那么它应该允许最多 16 个数字。
HTML:
HTML：
<input type="text" maxlength="15" onkeyup="checkCurrency(this)"/>
script:
脚本：
function checkCurrency(ctrl) {
ctrl.setAttribute('maxlength', '16');
var currency = ctrl.value.replace(/[,]+/g, '');
var valid = /^\d{0,13}(\.\d{0,2})?$/.test(currency),
val = currency;
if (valid) {
ctrl = val;
} else {
ctrl.setAttribute('maxlength', '13');
}
};
Now, it works fine when 14th place is a decimal(.),but please put any integer on 14th place and see the difference.
现在，当第 14 位是小数（.）时它可以正常工作，但请在第 14 位放置任何整数并查看差异。
采纳答案by Dipen Dedania
Try this..
试试这个..
HTML
HTML
<input id="a" type="text" maxlength="15" />
JS
JS
$('#a').keypress(function (event) {
if ($('#a').val().length < 14) {
if (event.keyCode != '110' && event.charCode != '46') {
$('#a').attr('maxlength', '13');
} else if (event.keyCode == '110' || event.charCode == '46') {
$('#a').attr('maxlength', '16');
}
}
});
回答by Sterling Archer
Why don't you just convert the number to a string, check the length and last substring for a period, and adjust the maxlength accordingly
为什么不直接将数字转换为字符串，检查一段时间的长度和最后一个子字符串，并相应地调整 maxlength
function checkCurrency(ctrl) {
var x = ctrl.value.toString();
var size = x.length;
if (x.substring(size-1) == "." && size >= 14) {
ctrl.maxlength = 16;
} else {
ctrl.maxlength = 13;
}
}
回答by akki
Try this out:
试试这个：
HTML code:
HTML代码：
<input type="text" maxlength="13" />
And the jQuery:
和 jQuery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("input").keypress(function(e)
{
string = $('input').val();
length = string.length;
if (length == 13){
if (e.which == 46){
$("input").attr('maxlength', 16);
}
}
});
</script>
回答by Shaminder S Aujla
You can Do Something Like This
你可以做这样的事情
HTML
HTML
<input type="text" id="inp">
JQuery
查询
$('input').attr('maxLength','13').keyup(
function (){
if(this.value.contains('.'))
$(this).attr('maxLength','16');
else
$(this).attr('maxLength','13');
});
and dont forget to add JQuery reference.
并且不要忘记添加 JQuery 引用。
EDIT: Code edited as you donot want the text to get blinked.
编辑：代码已编辑，因为您不希望文本闪烁。
回答by Vitox
I never think that a string comparison is better than a regular expression test (when it's a number question (absolutely when it's a decimal question)). I'm fairly experienced with problems on user input, so I always prefer use regular expressions to do exactly this kind of input behavior, because Its performance is always fast, more reliable, and more easy to maintenance.
我从不认为字符串比较比正则表达式测试更好（当它是一个数字问题时（绝对当它是一个小数问题时））。我对用户输入的问题有相当的经验，所以我总是更喜欢使用正则表达式来做这种输入行为，因为它的性能总是快速、更可靠、更易于维护。
I made a "input backup" behavior to always back the last valid insertion. So, for your exactly need, here is a complete example (I kept your Regex): fiddle
我做了一个“输入备份”行为来始终支持最后一个有效的插入。因此，对于您的确切需要，这是一个完整的示例（我保留了您的正则表达式）：fiddle
jQuery Code
jQuery 代码
var varRegex = /^\d{0,13}(\.\d{0,2})?$/;
var varLastValidValue = "";
$(function ()
{
$('#SpecialInput').keyup(function ()
{
if (!varRegex.test($(this).val()))
$(this).val(varLastValidValue);
else
varLastValidValue = $(this).val();
});
});
Different from other answers, my have the advantage to force only 2 decimal numbers (Any where). On the server side, I think it's essential (And I believe that it's why you are putting a limitation on the input. You are reflecting the format of stored data from DataBase, right!?).
与其他答案不同，我的优势是只能强制使用 2 个十进制数字（任何地方）。在服务器端，我认为这是必不可少的（而且我相信这就是您对输入进行限制的原因。您正在反映来自数据库的存储数据的格式，对吧！？）。
Is important note that this code only works (as It is) for 1 input. For multiple inputs in a same page, a simple approach would use elements attribute, or some thing like that to store the "LastValidValue".
重要的是要注意，此代码仅适用于（按原样）1 个输入。对于同一页面中的多个输入，一种简单的方法是使用元素属性或类似的东西来存储“LastValidValue”。
(I know that the perfection would be listen the 'onkeydown' event, and block the user input. But It will use a little more advanced code, and I want to make it simple)
（我知道完美的是监听 'onkeydown' 事件，并阻止用户输入。但它会使用更高级的代码，我想让它变得简单）
Hope I helped!
希望我有所帮助！
回答by Nikita U.
my 2 cents
我的 2 美分
HTML
HTML
<input type="text" maxlength="13"/>
JS
JS
$('input').keydown(function (event) {
$(this).data('previous', $(this).val());
if ((event.keyCode == 110) || (event.keyCode == 190)) {
$(this).attr('maxlength', 16);
}
});
$('input').keyup(function (event) {
if ( ! /^\d{0,13}(\.\d{0,2})?$/.test($(this).val())) {
$(this).val($(this).data('previous'));
}
});
