Скрыть / очистить поле ввода с прототипом

У меня есть такой сценарий:

if (Object.isUndefined(Axent)) { var Axent = { } }
 Axent.SelfLabeledInput = Class.create({
initialize: function() {
    var labelSelector = arguments[0] || 'label';
    $$(labelSelector).findAll(function(l) {return (l.readAttribute('for') !== null)}).each(function(l){
        l.hide();
        $(l.readAttribute('for'))._value = l.innerHTML;
        if ($(l.readAttribute('for')).value.empty()) {
            $(l.readAttribute('for')).value = $(l.readAttribute('for'))._value
        }
        $(l.readAttribute('for')).observe('blur',function(e){if (Event.element(e).value == '') Event.element(e).value = Event.element(e)._value;});
        $(l.readAttribute('for')).observe('focus',function(e){if (Event.element(e).value == Event.element(e)._value) Event.element(e).value = '';});
    });
}
});

И следующая форма:

    <form name = "comform" action = "#" method = "post" id = "commentform">
    <div class = "input"> 
<p>
<label for = "comment">Type your comment here...</label>
<textarea name = "comment" id = "comment" rows = "8" cols = "10" class = "" ></textarea>
</p>
</div>
    <div class = "input">
<p>
<label for = "author">Name (required)</label>        
<input type = "text" name = "author" id = "author" size = "22" class = ""/>
</p>
</div>
    <div class = "input">
<p>
<label for = "email">Email (gravatar enabled) (required)</label>         
<input type = "text" name = "email" id = "email" size = "22" class = ""/>
</p>
</div>
    <div class = "input">
<p>
<label for = "url">Website (optional)</label>        
<input type = "text" name = "url" id = "url" size = "22" />
</p>
</div>
    <div class = "submit">
<input type = "submit" name = "submit" id = "sub" value = "Leave comment" /> 
<input type = "hidden" name = "comment_post_ID" id = "hidden" value = ""> 
</div>

</form> 
<script type = "text/javascript">
//<![CDATA[
new Axent.SelfLabeledInput('#commentform label');
//]]>
</script>

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

Это работает с последней версией Prototype lib. Я не знаю JavaScript, поэтому мне нужна ваша помощь. Я использую эту форму для своей области комментариев WordPress.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
4 744
3

Ответы 3

Не волнуйтесь, ярлыки не будут отправлены.

Этот скрипт удалит метки из DOM при отправке. Его нужно запускать после загрузки DOM (ну, по крайней мере, формы) и если ваши элементы формы находятся внутри меток, они тоже исчезнут!

document.getElementById( 'commentform' ).onsubmit = function() {
    var labels = this.getElementsByTagName( 'label' );
    while( labels[0] ) {
        labels[0].parentNode.removeChild( labels[0] );
    }
    return true;
} 

Это не прототип сценария. Это пlain Оld Javascript.

Элементы предварительно заполнены текстом метки. В фокусе текст по умолчанию исчезает и снова появляется при размытии, если элемент все еще пуст.

Вы можете попробовать это. Я не использую прототипы, так что местами это предположения.

if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
    var labelSelector = arguments[0] || 'label';
    $$(labelSelector).findAll(function(l) {return (l.readAttribute('for') !== null)}).each(function(l){
        l.hide();
        var el = $(l.readAttribute('for'));
        el._value = l.innerHTML;
        if (el.value.empty()) {
            el.value = el._value
        }
        el.observe('blur',function(e){if (Event.element(e).value == '') Event.element(e).value = Event.element(e)._value;});
        el.observe('focus',function(e){if (Event.element(e).value == Event.element(e)._value) Event.element(e).value = '';});
        $(el.form).observe( 'submit', (function(thisel) { return function(e) {
            if ( thisel.value == thisel._value ) { thisel.value = '' }
        }})(el));
    });
}

Наконец-то я заработал! Вот последний код, если кто-то хочет его запустить:

if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
    var labelSelector = arguments[0] || 'label';
    $$(labelSelector).findAll(function(l) {return (l.readAttribute('for') !== null)}).each(function(l){
            l.hide();
            var el = $(l.readAttribute('for'));
            el._value = l.innerHTML;
            if (el.value.empty()) {
                    el.value = el._value
            }
            el.observe('blur',function(e){if (Event.element(e).value == '') Event.element(e).value = Event.element(e)._value;});
            el.observe('focus',function(e){if (Event.element(e).value == Event.element(e)._value) Event.element(e).value = '';});
    $(el.form).observe( 'submit', (function(thisel) { return function(e) {
            if ( thisel.value == thisel._value ) { thisel.value = '' }
    }})(el));
    });
}});

Другие вопросы по теме