| Autor | Zpráva | ||
|---|---|---|---|
| David Klouček Profil |
#1 · Zasláno: 27. 7. 2013, 12:50:59
Potřebuji udělat v textarea několikařádkový placeholder. Jedinné řešení, které jsem našel je pomocí javascriptu a to tímto pluginem https://github.com/bradjasper/jQuery-Placeholder-Newlines, ale placeholder se odesílá jako normální hodnota. Řešil toto už někdo? Nechápu, proč při návrhu HTML5 s tímto nepočítali.
|
||
| DJ Miky Profil |
#2 · Zasláno: 27. 7. 2013, 13:25:31
Víceřádkový placeholder není běžný a dle mého názoru často zavání uváděním více různých hodnot do jednoho pole, což je obvykle špatně z hlediska návrhu formuláře.
Zmíněný plugin by měl řešit (ne)odesílání – naváže se na submit akci formuláře a v případě, že se hodnota rovná placeholderu, se text smaže. Další možné řešení je obrázek na pozadí skrývaný při fokusu, ale přináší další problémy (nepřístupnost, nemožnost změnit/zvětšit písmo, obrázek navíc a potenciální nečitelnost, pokud prohlížeč vynutí změnu barev u formulářových polí). |
||
|
Časová prodleva: 3 dny
|
|||
| David Klouček Profil |
Nakonec jsem si teda napsal vlastní Javascript. Funguje, ovšem je tam jeden problém - v IE10 se místo řádků zobrazí klasické \n. Když použiji \n\r tak to taky nejde a navíc v ostatních prohlížečích to dělá dvojité řádky. Co s tím?
function addLines(s)
{
return s.replace(/\\n/g, "\n");
}
function setPlaceholder(el)
{
el.style.color = 'silver';
el.value = addLines(el.dataset.placeholder);
}
function unsetPlaceholder(el)
{
if (isPlaceholder(el))
{
el.style.color = 'black';
el.value = '';
}
}
function isPlaceholder(el)
{
return el.dataset.placeholder !== undefined && addLines(el.dataset.placeholder) == addLines(el.value);
}
$(document).ready(function()
{
$('form').each(function(i, el)
{
var form = $(el);
form.submit(function()
{
form.find(':input').each(function(i, input) {
if (input.tagName == 'TEXTAREA' || input.tagName == 'INPUT')
{
unsetPlaceholder(input);
}
});
});
form.find(':input').each(function(i, input)
{
if (input.tagName == 'TEXTAREA' || input.tagName == 'INPUT')
{
if (input.placeholder.length > 0)
{
input.dataset.placeholder = input.placeholder;
input.placeholder = '';
var j_input = $(input);
if (input.value == '') {
setPlaceholder(input);
}
j_input.click(function() {
unsetPlaceholder(input);
});
j_input.keyup(function() {
if (input.value == '' && ! j_input.is(":focus") && ! isPlaceholder(input)) {
setPlaceholder(input);
}
});
j_input.blur(function() {
if (input.value == '' && ! isPlaceholder(input)) {
setPlaceholder(input);
}
});
}
}
});
});
});http://jsfiddle.net/S2mwY/ |
||
|
Časová prodleva: 10 dní
|
|||
| David Klouček Profil |
Problém byl jinde. Tady je plně funkční řešení, snad se tam nenajde problém se staršími prohlížeči.
function setMultilinePlaceholder(placeholderClass)
{
function addLines(s) {
return s.replace(/\\n/g, "\n");
}
function setPlaceholder(el) {
el.setAttribute('data-onpc', 1);
el.classList.add(placeholderClass);
el.value = el.tagName == 'TEXTAREA' ? addLines(el.getAttribute('data-placeholder')) : el.getAttribute('data-placeholder');
}
function unsetPlaceholder(el) {
if (isPlaceholder(el)) {
el.setAttribute('data-onpc', 0);
el.classList.remove(placeholderClass);
el.value = '';
}
}
function isPlaceholder(el) {
return el.getAttribute('data-onpc') != undefined && el.getAttribute('data-onpc') == 1;
}
$(document).ready(function () {
$(document).find(':input').each(function (i, input) {
if (input.tagName == 'TEXTAREA' || input.tagName == 'INPUT') {
if (input.placeholder.length > 0) {
input.setAttribute('data-placeholder', input.placeholder);
input.setAttribute('data-onpc', 0);
input.placeholder = '';
var j_input = $(input);
if (input.value == '') {
setPlaceholder(input);
}
j_input.click(function () {
unsetPlaceholder(input);
});
j_input.keydown(function () {
unsetPlaceholder(input);
});
j_input.blur(function () {
if (input.value == '' && !isPlaceholder(input)) {
setPlaceholder(input);
}
});
}
}
});
$('form').each(function (i, el) {
var form = $(el);
form.submit(function () {
form.find(':input').each(function (i, input) {
if (input.tagName == 'TEXTAREA' || input.tagName == 'INPUT') {
unsetPlaceholder(input);
}
});
});
});
});
};
//použití, parametr je CSS třída předstírající placeholder
setMultilinePlaceholder('xxx'); |
||
| Chamurappi Profil |
#5 · Zasláno: 9. 8. 2013, 11:43:17
Reaguji na Davida Kloučka:
„Tady je plně funkční řešení, snad se tam nenajde problém se staršími prohlížeči.“ Samozřejmě, že najde, vždyť používáš classList.
Je to docela dlouhý kód. K čemu v něm je atribut data-onpc?
|
||
| joe Profil |
#6 · Zasláno: 9. 8. 2013, 11:57:17
$('form').each(function (i, el) {Nebude jednodušší hledat rodiče form toho konkrétního inputu, kde chceš placeholder, než znovu prohledávat všechny formuláře a hledat v nich, jestli se v nich náhodou neobjevuje nějaký input, který placeholder má?
|
||
| David Klouček Profil |
#7 · Zasláno: 10. 8. 2013, 20:26:38
Chamurappi:
„Samozřejmě, že najde, vždyť používáš classList.“ Změněno na jQuery setClass() a getClass(). „Je to docela dlouhý kód. K čemu v něm je atribut data-onpc?“ Teď už není. joe: „$('form').each(function (i, el) {“ Dobrej nápad, upraveno. function setMultilinePlaceholder(placeholderClass)
{
function addLines(s) {
return s.replace(/\\n/g, "\n");
}
function setPlaceholder(el) {
el.value = el.tagName == 'TEXTAREA' ? addLines(el.getAttribute('data-placeholder')) : el.getAttribute('data-placeholder');
el.setAttribute('data-placeholder', '');
$(el).addClass(placeholderClass);
}
function unsetPlaceholder(el) {
if (isPlaceholder(el)) {
el.setAttribute('data-placeholder', el.value);
el.value = '';
$(el).removeClass(placeholderClass);
}
}
function isPlaceholder(el) {
return el.getAttribute('data-placeholder') != undefined && el.getAttribute('data-placeholder') == '';
}
$(document).ready(function () {
$(document).find(':input').each(function (i, input) {
if (input.tagName == 'TEXTAREA' || input.tagName == 'INPUT') {
if (input.placeholder.length > 0) {
input.setAttribute('data-placeholder', input.placeholder);
input.placeholder = '';
var jInput = $(input);
if (input.value == '')
setPlaceholder(input);
jInput.focusin(function () {
unsetPlaceholder(input);
});
jInput.blur(function () {
if (input.value == '' && !isPlaceholder(input)) {
setPlaceholder(input);
}
});
}
var form = $(jInput).parents('form');
if (form.length > 0) {
form.submit(function() {
unsetPlaceholder(input);
});
}
}
});
});
};
//použití, parametr je třída předstírající placeholder
setMultilinePlaceholder('ph');Jen nechápu, proč jInputjInput.parents('form') hlásí Uncaught TypeError: Cannot call method 'parents' of undefined, když je instancí jQuery. Musel jsem to obalit do $().
|
||
| joe Profil |
#8 · Zasláno: 10. 8. 2013, 21:13:26
David Klouček:
„Jen nechápu, proč jInputjInput.parents('form') hlásí Uncaught TypeError: Cannot call method 'parents' of undefined, když je instancí jQuery. Musel jsem to obalit do $().“ Pokud ti to tu chybu hlásí, pak jInput je právě undefined, protože to nemáš v té podmínce if (input.placeholder.length > 0) {, ale mimo ni.
|
||
|
Časová prodleva: 11 let
|
|||
0