Kā web formai izveidot tādus teksta ievades laukus (input tegs), kuros
pēc noklusējuma attēlots kāds uzvedinošs, paskaidrojošs teksts par to,
kas šajā laukā jāievada, bet ieklikšķinot šajā laukā, šis teksts pazūd?
Agrāk šim nolūkam tika izmantotas input tegā iebūvētas Javascript
funkcijas, tomēr mūsdienās tam atbilstošāks būs HTML5 standarta atribūts
"placeholder".
Par cik turpmāk aprakstītā koda darbībai nepieciešama jQuery bibliotēka, neaizmirstam to pieslēgt.
Lappusē, kurā mums atrodas forma ar teksta ievades laukiem, ievietojam sekojošo :
1) Lappuses sākumā, pirms formas laukiem :
2) Pats ievades lauks ar atribūtu "placeholder" izskatās šādi :
3) Pēc formas laukiem :
kur commFl - teksta ievades lauku, kam vēlamies piešķirt šo īpašību, klase (kā šajā gadījumā), vai identifikātors
Šeit jāpiebilst, ka minētais Javscript nepieciešams tikai tamdēļ, lai "placeholder" darbotos visos web pārlūkos, jo šobrīd ne visi pārlūki diemžēl atbalsta jauno specifikāciju HTML5.
pēc noklusējuma attēlots kāds uzvedinošs, paskaidrojošs teksts par to,
kas šajā laukā jāievada, bet ieklikšķinot šajā laukā, šis teksts pazūd?
Agrāk šim nolūkam tika izmantotas input tegā iebūvētas Javascript
funkcijas, tomēr mūsdienās tam atbilstošāks būs HTML5 standarta atribūts
"placeholder".
Par cik turpmāk aprakstītā koda darbībai nepieciešama jQuery bibliotēka, neaizmirstam to pieslēgt.
Lappusē, kurā mums atrodas forma ar teksta ievades laukiem, ievietojam sekojošo :
1) Lappuses sākumā, pirms formas laukiem :
Code
<script>
jQuery.fn.textPlaceholder = function () {
return this.each(function(){
var that = this;
if (that.placeholder && 'placeholder' in document.createElement(that.tagName)) return;
var placeholder = that.getAttribute('placeholder');
var input = jQuery(that);
if (that.value === '' || that.value == placeholder) {
input.addClass('text-placeholder');
that.value = placeholder;
}
input.focus(function(){
if (input.hasClass('text-placeholder')) {
this.value = '';
input.removeClass('text-placeholder')
}
});
input.blur(function(){
if (this.value === '') {
input.addClass('text-placeholder');
this.value = placeholder;
} else {
input.removeClass('text-placeholder');
}
});
that.form && jQuery(that.form).submit(function(){
if (input.hasClass('text-placeholder')) {
that.value = '';
}
});
});
};
</script>
jQuery.fn.textPlaceholder = function () {
return this.each(function(){
var that = this;
if (that.placeholder && 'placeholder' in document.createElement(that.tagName)) return;
var placeholder = that.getAttribute('placeholder');
var input = jQuery(that);
if (that.value === '' || that.value == placeholder) {
input.addClass('text-placeholder');
that.value = placeholder;
}
input.focus(function(){
if (input.hasClass('text-placeholder')) {
this.value = '';
input.removeClass('text-placeholder')
}
});
input.blur(function(){
if (this.value === '') {
input.addClass('text-placeholder');
this.value = placeholder;
} else {
input.removeClass('text-placeholder');
}
});
that.form && jQuery(that.form).submit(function(){
if (input.hasClass('text-placeholder')) {
that.value = '';
}
});
});
};
</script>
2) Pats ievades lauks ar atribūtu "placeholder" izskatās šādi :
Code
<input placeholder="ievadiet savu e-pastu">
3) Pēc formas laukiem :
Code
<script type="text/javascript">$(".commFl").textPlaceholder();</script>
kur commFl - teksta ievades lauku, kam vēlamies piešķirt šo īpašību, klase (kā šajā gadījumā), vai identifikātors
Šeit jāpiebilst, ka minētais Javscript nepieciešams tikai tamdēļ, lai "placeholder" darbotos visos web pārlūkos, jo šobrīd ne visi pārlūki diemžēl atbalsta jauno specifikāciju HTML5.
