Скрыть / очистить поле ввода с прототипом - PullRequest
Новая
       15

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

0 голосов
/ 18 января 2009

У меня есть следующий скрипт: 

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.

Ответы [ 3 ]

2 голосов
/ 18 января 2009

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

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));
    });
}});
0 голосов
/ 18 января 2009

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

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

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));
    });
}
0 голосов
/ 18 января 2009

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

Этот скрипт удалит метки из DOM при отправке. Его нужно запускать после загрузки DOM (ну, по крайней мере, формы) , и если ваши элементы формы находятся внутри меток, они тоже исчезнут! document.getElementById( 'commentform' ).onsubmit = function() { var labels = this.getElementsByTagName( 'label' ); while( labels[0] ) { labels[0].parentNode.removeChild( labels[0] ); } return true; } Это не прототип сценария. Это P lain O ld J avascript.

...