Nano Hash - криптовалюты, майнинг, программирование

Добавить количество символов для ввода администратора и текстовых областей

Я хотел бы добавить количество символов в каждую область ввода и текста на странице сведений о продукте в моем администраторе магазина Magento.

Я привык к jQuery, но предпочел бы использовать для этого библиотеку Prototype по умолчанию, если это возможно. Я нашел где-то этот код, который делает трюк для полей краткого описания и описания, используя их идентификаторы для их таргетинга:

Event.observe(window, 'load', function() {

Element.insert( $('short_description').up().next().down('span'), { 
    'after': "<div id='short_description_counter'>Char count: <span id='short_description_counter_num'>"+$('short_description').getValue().length+"</span></div>"
});
Element.insert( $('description').up().next().down('span'), { 
    'after': "<div id='description_counter'>Char count: <span id='description_counter_num'>"+$('description').getValue().length+"</span></div>"
});

Event.observe('short_description', 'keyup', function(event) {   $("short_description_counter_num").update(this.getValue().length);  });
Event.observe('description', 'keyup', function(event) { $("description_counter_num").update(this.getValue().length);    });
});

Может ли кто-нибудь с опытом работы с прототипом сказать мне, как отредактировать это, чтобы оно запускалось для каждого ввода и текстовой области, поэтому не указывало идентификатор? Я предполагаю, что есть каждая (функция), которую можно использовать.

ОБНОВЛЕНИЕ: вот текущий код, работающий с текстовой областью, указанной ее идентификатором - http://jsbin.com/isisur/2/edit

javascript magento prototypejs
04.04.2013

Ответы:


1

Мой прототип заржавел, но я думаю, что это сработает:

Event.observe(window, 'load', function() {
    $$('input[type="text"], textarea').each( function(i) {
        var my_id = $(i).readAttribute('id');
        $(i).insert({ 
            'after': "<div id='"+my_id+"_counter'>Char count: <span id='"+my_id+"_counter_num'>"+$(i).getValue().length+"</span></div>"
        });
        $(i).observe('keyup', function(e) {
            $(my_id+"_counter_num").update($(this).getValue().length);
        });
    });
});

JSFiddle

09.04.2013
  • Здоровья за попытку! Выдает ошибку: Uncaught TypeError: Cannot call method 'down' of undefined 09.04.2013
  • Я не думаю, что вы можете обновить вопрос фрагментом HTML, который показывает ввод текста и / или текстовую область и окружающий HTML-код для справки? 09.04.2013
  • Это было очень полезно. Посмотрите мой обновленный ответ с рабочей скрипкой. 09.04.2013

    • 2

    Более гибкий код, работающий со всеми полями классов validate-length и maximum-length-XXX:

    document.observe('dom:loaded', function() {
    Element.addMethods({
        prepare_for_countdown: function(element) {
            var elm = $(element);
            if(!elm.retrieve('counter')) {
                var counter = new Element('span');
                elm.next('.note').insert(counter);
                elm.store('counter', counter);
                var maxLen = elm.className.match(/maximum-length-(\d+)/)[1];
                elm.store('maxLen', maxLen);
            }
            return elm;
        },
        countdown: function(element) {
            var elm = $(element);
            var curLen = elm.getValue().length;
            var maxLen = elm.retrieve('maxLen');
            var count  = maxLen - curLen;
            var counter = elm.retrieve('counter');
            if (curLen >= maxLen) {
                counter.update(' (' + count + ')').setStyle({'color': 'red'});
            } else {
                counter.update(' (+' + count + ')').setStyle({'color': 'green'});
            }
            return elm;
        }
    });

    $$('.validate-length').invoke('prepare_for_countdown').invoke('countdown');

    document.on('keyup', '.validate-length', function(evt, elm) {
        elm.countdown();
    });
});

    Из: Prototype.js 1.7 неперехваченное исключение: синтаксическая ошибка, нераспознанное выражение: [object HTMLInputElement]

    12.08.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..