如何从标签设置输入字段最大长度答案

【问题标题】：How to set input field maxlength from label如何从标签设置输入字段最大长度
【发布时间】：2013-05-15 19:19:13
【问题描述】：

我正在尝试找出一种方法来更改名为输入字段的 ajax 的最大长度，方法是从字段标签中提取值并更新默认值。字段标签都遵循相同的格式 - id、class、type 和 maxlength。要设置的新 maxlength 值始终存在于 id ...max_X_characters...

`<input id="ecwid-productoption-16958710-Line_5_:0028max_4_characters:0029" class="gwt-
TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption-
Line_5_:0028max_4_characters:0029" type="text" maxlength="200"></input>`

所以在这个例子中我需要将 maxlength 设置为 4。

另一个问题是有多个输入字段，通常具有不同的最大长度值。示例见here。

我正在考虑设置一个脚本，以便在字段加载后提取值，但我不介意承认，这是我的头上 - 希望你们中的一个聪明的家伙和女孩能弄清楚！

更新：感谢您的建议，我已经尝试了两种不同的组合，但无法让它们发挥作用。

这是 Ecwid 的技术团队建议的代码，它将页面上的所有输入字段设置为一个最大长度（在本例中为 6）

 `Ecwid.OnPageLoaded.add(function(page){if (page.type == "PRODUCT") {  
 $("input.ecwid-productBrowser-details-optionTextField").attr('maxlength','6');
 };
 })`

但是，正如我所说，某些产品的输入字段具有不同的最大长度。

根据您的建议，我尝试将上面的“6”替换为一个函数，以从输入 id 中获取最大长度，但无法正常工作。

还有什么想法吗？

谢谢

更新：

（几乎）破解它，这是工作代码

`Ecwid.OnPageLoaded.add(function(page){
 var regex = new RegExp("max_(\\d+)_characters");
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
 var inp = inputs[i];
 if (regex.test(inp.id)) {
    var newLimit = inp.id.match(regex)[1];
    inp.maxLength = newLimit;
 }        
 }
 });`

非常感谢您的帮助，它在产品页面上就像做梦一样，但在另一个地方却没有。客户可以从购物篮中通过弹出窗口编辑输入文本。

字段代码相似：

`<input id="ecwid-productoption-16958710-Line_5_:0028max_4_characters:0029"
class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption-
Line_5_:0028max_4_characters:0029" type="text" maxlength="200"></input>`

欢迎提出建议

克里斯

更新：

非常感谢 ExpertSystem（你是天才！） - 我想我们已经做到了。（在 IE10、firefox 21、chrome 27 上测试）。

下面的代码适用于同时使用 Yola 和 Ecwid 的人，但我猜原始代码可能适用于使用其他网站构建器的人。它通过检查输入字段标题中的数字（在本例中为“max”和“characters”之间的值）并将其替换为字段的 maxLength 值来限制用户可以在 Ecwid 中输入输入字段的字符数.它限制了产品浏览器、html 小部件和购物车弹出窗口中的字段。

这里是：

转到 Yola 的自定义站点跟踪代码部分。在“Footer Code”列（实际上是放在“body”的底部），放置以下代码：

<script>
Ecwid.OnPageLoaded.add(function(page){
var regex = new RegExp("max_(\\d+)_characters");
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    var inp = inputs[i];
    if (regex.test(inp.id)) {
        var newLimit = inp.id.match(regex)[1];
        inp.maxLength = newLimit;
}        
}
});
</script>

<script>
var regex = new RegExp("max_(\\d+)_characters");
function fixMaxLength(container) {
    var inputs = container.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var inp = inputs[i];
        if (regex.test(inp.id)) {
            var newLimit = inp.id.match(regex)[1];
            inp.maxLength = newLimit;
        }
    }
};
</script>

并将其放入“标题代码”列：

<script>
document.addEventListener("DOMNodeInserted", function() {
    var popups = document.getElementsByClassName("popupContent");
    for (var i = 0; i < popups.length; i++) {
        fixMaxLength(popups[i]);
    }
});
</script>

就是这样！你可以走了。

【问题讨论】：

如果你在 ID 和 className 字段中使用更多的字符，它会让自己陷入痛苦！幸好你至少正确地关闭了输入！
如果您可以将值 X 动态插入到 id/类名称中，为什么不能将该值插入到源中的 maxlength 属性中？
我可能应该提到，我使用的是 ecwid，所以对 maxlength 源没有任何控制权（我尝试让他们在后端添加一个 maxlength 选择框，但是这是不行的）。我可以使用 javascript API 来获取或更改某些元素。
如果该标记来自 CMS 或类似的东西，我会考虑使用其他东西，因为它甚至不接近有效？

标签： javascript ajax limit maxlength

【解决方案1】：

不清楚“ajax 调用输入字段”的含义，但假设输入字段是在某个 AJAX 调用的成功回调中创建并添加到 DOM，您可以将以下代码放入您的页面<head>:

var regex = new RegExp("max_(\\d+)_characters");
function fixMaxLength(container) {
    var inputs = container.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var inp = inputs[i];
        if (regex.test(inp.id)) {
            var newLimit = inp.id.match(regex)[1];
            inp.maxLength = newLimit;
        }
    }
}

然后，在 AJAX 调用的“onSuccess”回调结束时，附加以下内容：

fixMaxLength(document);

更新：
根据您下面的 cmets，如果您需要将 fixMaxLength() 应用于 div 的“popupContent”类，它会动态添加到您的 DOM，一个简单的方法（虽然不是最有效的）是为 DOM 修改事件添加一个侦听器（例如<head>):

document.addEventListener("DOMNodeInserted", function() {
    var popups = document.getElementsByClassName("popupContent");
    for (var i = 0; i < popups.length; i++) {
        fixMaxLength(popups[i]);
    }
});

（注意：我只在最新版本的 Chrome 和 Firefox 上测试过它，所以我不确定它适用于哪些其他/较旧的浏览器。）
（注 2：GGGS，已经在 IE10 上对其进行了测试（并且发现它也可以工作）。

【讨论】：

知道了！感谢您的帮助 - 现在有另一个问题。
总是乐于提供帮助 :) 如果您还有其他问题，请在 SO 中发表新帖子。我敢打赌，很多人会很乐意再次提供帮助。
我看不出有什么不同。可以使用相同的功能。您可能还需要将它放在其他地方（除了Ecwid.OnPageLoaded.add(function(page){...） - 可能在为您提到的弹出窗口生成 HTML 的代码处。
将您的代码和“ecwid”版本放入网站的页脚，它为我解决了三分之二的问题。再次感谢您的帮助，非常感谢
Soo...还有第三期！带上他们！ :D

【解决方案2】：

您的 id 属性上的正则表达式怎么样？如：

jQuery('input').each(function() {
    var idVal = jQuery(this).attr('id');
    var regex = /max_(\d+)_characters/g;
    var result = regex.exec(idVal);
    var length = result[1];
});

这是所有输入的循环。运行后，长度变量将具有适当的长度，用于您的下一步。

【讨论】：