Как установить максимальную длину поля ввода из метки

Я пытаюсь найти способ изменить максимальную длину поля ввода, называемого ajax, вытащив значение для установки из метки поля и обновив значение по умолчанию. Все метки полей имеют один и тот же формат - идентификатор, класс, тип и максимальная длина. Новое устанавливаемое значение maxlength всегда присутствует в id ... max_X_characters ...

`<input id="ecwid-productoption-16958710-Line
<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>
:0028max
`<input id="ecwid-productoption-16958710-Line
<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>
:0028max_4_characters:0029" class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption- Line
<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>
:0028max_4_characters:0029" type="text" maxlength="200"></input>`
characters:0029" class="gwt- TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption- Line
<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>
:0028max
`<input id="ecwid-productoption-16958710-Line
<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>
:0028max_4_characters:0029" class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption- Line
<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>
:0028max_4_characters:0029" type="text" maxlength="200"></input>`
characters:0029" type="text" maxlength="200"></input>`

Итак, в этом примере мне нужно установить maxlength равным 4.

Другая проблема заключается в том, что существует несколько полей ввода, часто с разными значениями максимальной длины. См. Пример здесь.

Я думал о том, чтобы настроить сценарий, чтобы вытащить значение после загрузки полей, но я не возражаю признать это, это над моей головой - надеюсь, один из вас, умных парней и девушек, сумеет это понять!

Обновление: Спасибо за предложения. Я пробовал оба варианта в различных комбинациях, но не могу заставить их работать.

Вот код, предложенный технической командой Эквида, который устанавливает для всех полей ввода на странице одну максимальную длину (в данном случае 6).

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

Однако, как я уже говорил, для некоторых продуктов существуют поля ввода с разной максимальной длиной.

Я попытался заменить цифру 6 выше на функцию, основываясь на ваших предложениях, чтобы получить максимальную длину из входного идентификатора, но не могу заставить ее работать.

Есть еще идеи?

Спасибо

Обновление:

Взломал (почти), вот рабочий код

`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
<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>
:0028max_4_characters:0029" class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption- Line
<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>
:0028max_4_characters:0029" type="text" maxlength="200"></input>`

Предложения очень приветствуются

Крис

ОБНОВЛЕНИЕ:

Большое, много, большое спасибо ExpertSystem (вы гений!) - я думаю, что у нас это есть. (проверено на IE10, firefox 21, chrome 27).

Приведенный ниже код предназначен для людей, использующих Yola и Ecwid вместе, но я предполагаю, что исходный код может работать и для людей, использующих другие конструкторы сайтов. Он ограничивает количество символов, которые пользователь может вводить в поля ввода в Эквиде, проверяя число в заголовке поля ввода (в данном случае значение между 'max' и 'characters') и заменяя его значением maxLength поля. . Он ограничивает поля в браузере продукта, в виджетах html и во всплывающем окне корзины.

Вот:

Перейдите в раздел «Пользовательский код отслеживания сайта» Yola. В столбце «Код нижнего колонтитула» (фактически размещенном в нижней части «тела») поместите этот код:

<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>

Вот и все! Тебе хорошо идти.


person GGGS    schedule 15.05.2013    source источник
comment
Если вы используете больше символов в полях ID и className, он выйдет из агонии! Хорошо, что ты хоть как-то закрыл вход!   -  person adeneo    schedule 15.05.2013
comment
Если вы можете динамически вставлять значение X в имя идентификатора / класса, почему вы не можете просто вставить это значение в свойство maxlength в источнике?   -  person Mike Brant    schedule 15.05.2013
comment
Я, наверное, должен был упомянуть, что я использую ecwid, поэтому не имею никакого контроля над источником максимальной длины (я пытался попросить их добавить поле выбора максимальной длины в бэкэнде, но это бесполезно). Я могу использовать javascript API для получения или изменения некоторых элементов.   -  person GGGS    schedule 15.05.2013
comment
Если эта разметка исходит от CMS или чего-то подобного, я бы подумал об использовании чего-то еще, поскольку это даже близко не к действию?   -  person adeneo    schedule 15.05.2013


Ответы (2)


Не совсем понятно, что подразумевается под «полями ввода, называемыми ajax», но предположим, что поля ввода создаются и добавляются в DOM внутри успешного обратного вызова для некоторого вызова AJAX, вы можете разместить следующий фрагмент кода на своих страницах <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;
        }
    }
}

А затем, в конце обратного вызова «onSuccess» вызова AJAX, добавьте это:

fixMaxLength(document);

ОБНОВЛЕНИЕ:
На основании ваших комментариев ниже, если вам нужно применить 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 тоже.)

person gkalpak    schedule 15.05.2013
comment
Понятно! Спасибо за помощь - теперь еще один вопрос. - person GGGS; 18.05.2013
comment
Всегда рад помочь :) Если у вас есть другой вопрос, напишите здесь, в SO. Бьюсь об заклад, многие люди будут рады снова помочь. - person gkalpak; 18.05.2013
comment
Я не вижу разницы. Можно использовать ту же функцию. Возможно, вам нужно будет разместить его в другом месте (кроме Ecwid.OnPageLoaded.add(function(page){...) - возможно, в коде, который генерирует HTML-код для всплывающего окна, о котором вы говорите. - person gkalpak; 18.05.2013
comment
Поместите свой код и версию ecwid в нижний колонтитул сайта, и это решит для меня две из трех проблем. Еще раз спасибо за вашу помощь, это очень ценно - person GGGS; 22.05.2013
comment
Су ... есть третья проблема! Принеси их! : D - person gkalpak; 22.05.2013
comment
Хорошо, я понял, почему всплывающее окно не изменяется кодом, оно загружается после остальной части страницы и после нижнего колонтитула сайта, где находится код - на самом деле это самая последняя вещь перед закрывающим телом и html. Итак, я думаю, мне нужен код для проверки изменений на странице - как вы думаете? - person GGGS; 30.05.2013
comment
По-прежнему не на 100% ясно, как создается ваша DOM, но, возможно, вы могли бы использовать document.onload, чтобы дождаться готовности всех элементов DOM, прежде чем вызывать код для установки максимальной длины. - person gkalpak; 30.05.2013
comment
Взгляните на [ссылку] gewgawgiftstore.co.uk. Я использую Yola для основного сайта, где код изменения максимальной длины находится в разделе глобального кода нижнего колонтитула сайта. Затем я использую Ecwid, электронную торговлю на основе AJAX, откуда берутся поля ввода. Эквид загружает браузер продукта, который находится в основной части страницы, и все взаимодействия при просмотре и покупках происходят там. Кнопка «изменить» корзины активирует всплывающее окно вне браузера продукта и добавляется в нижнюю часть HTML-кода - при проверке с помощью «проверить элемент». - person GGGS; 30.05.2013
comment
@GGGS: я обновил свой ответ, чтобы (надеюсь) решить эту проблему. Вы можете попробовать и оставить отзыв :) - person gkalpak; 03.06.2013
comment
Спасибо, спасибо, спасибо, все работает (см. Обновление выше). Я не был уверен, куда поместить документ fixmaxlength, поэтому не включил его - не имеет значения, если я чего-то не упускаю? - person GGGS; 07.06.2013
comment
Добро пожаловать! Всегда рад помочь :) (Интересно, как вы так взволнованы этим ответом, но никогда не проголосовали за него: D) - person gkalpak; 07.06.2013
comment
Я здесь только новенький, меня не пускает! - person GGGS; 07.06.2013
comment
ООО Я вижу ! Теперь это имеет смысл :) Я не знал / не помнил, что было такое ограничение. - person gkalpak; 07.06.2013

Как насчет регулярного выражения в атрибуте 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];
});

Это цикл по всем входам. Как только это будет выполнено, переменная длины будет иметь правильную длину для каждого следующего шага.

person Duffmaster33    schedule 15.05.2013