| Autor | Zpráva | ||
|---|---|---|---|
| Prochy Profil |
#1 · Zasláno: 13. 3. 2014, 23:32:36
Zdravim,
je možný nějak dosáhnout vícebarevného inputu? Dejme tomu, že máme text "Karel Novák" a "Kar" by byl černým písmem, "el Novák" by byl šedým písmem. Jde mi o to, že bych rád vyhledával ajaxově klienta, a aktuálně nalezený klient by se zobrazoval šedým písmem pod tím aktuálním filtrem, což je např to "Kar". Počítám s tím, že to asi nepůjde přímo jedním inputem a bude nutné použít např. dva inputy jeden s černým písem, druhý s šedým písmem. Zkoušel toto někdo řešit? Jinak např. toto je funkční, ale samozřejmě pouze pro toto zadání, ale každý písmeno má jinou šířku a v tom vidím největší problém: <input type='text' style="margin:0;padding:0;color:black;border-right:none;float:left;width:20px;" name="filter" value="Kar"> <input type='text' style="margin:0;padding:0;color:gray;border-left:none;" name="searchClient" value="el Dvořák"> Děkuji |
||
| _es Profil |
#2 · Zasláno: 14. 3. 2014, 10:45:26
Prochy:
„je možný nějak dosáhnout vícebarevného inputu?“ Nie je. Je určený na písanie nenaformátovaného textu. Ak to chceš, musíš použiť iný element. |
||
| Chamurappi Profil |
#3 · Zasláno: 14. 3. 2014, 10:51:41
Reaguji na Prochyho:
Nebylo by normálnější místo šedého textu použít jednoduše označený text, jako to funguje na řadě jiných míst s dokončováním? Když by člověk psal dál, označený text přemaže, když ne, je to Karel Novák. |
||
| 1Pupik1989 Profil |
#4 · Zasláno: 14. 3. 2014, 11:01:22
Teoreticky by to mohlo jít divem, který by byl pod inputem jako pozadí a do něj napsat nalezenou hodnotu. Input by samozřejmě musel mít transparentní pozadí.
|
||
| janbarasek Profil |
#5 · Zasláno: 14. 3. 2014, 11:53:14
Prochy:
Můžeš použít třeba nějaké neproporcionální písmo a tím dosáhneš toho, že všechny znaky budou mít stejnou šířku. Mnohem lepší řešení by bylo ale to, že bys třeba zobrazil našeptávač, kde bude hledaný řetězec zvýrazněný, protože takto se může snadno stát, že budu chtít text smazat, ale odmažu jen jeden input a budu se divit, proč ten text stále v tom druhém zůstává. Možná by nebylo na škodu pod textem vytvořit podtrhnutí vybraného řetězce, ale nějak decentně, aby to nevypadalo jako odkaz. |
||
| Prochy Profil |
#6 · Zasláno: 14. 3. 2014, 21:24:33 · Upravil/a: Prochy
Chamurappi:
„Nebylo by normálnější místo šedého textu použít jednoduše označený text, jako to funguje na řadě jiných míst s dokončováním?“ Tohle bude asi nejlepší, snažil jsem se najít nějaké příklady daných našeptávačů, ale většinou to bylo ve stylu, že vyjela nějaká nabídka pod inputem. Tohle by neměl být problém udělat. Tak jsem teď nad tím laboroval a zjistil sem, že nejsem schopen přijít na to, jak označit javascriptem text. Našel jsem akorát funkci getSelection, ale to pouze zjistí vybraný text, nebo jsem na to aspoň nepřišel. Napadlo mě, že bych javascriptem nasimuloval zkratku CTRL+SHIFT+RIGHTARROW, ale na to jsem bohužel taky nepřišel, jak to provést.
|
||
|
Časová prodleva: 4 dny
|
|||
| Prochy Profil |
#7 · Zasláno: 18. 3. 2014, 20:22:39
Tak všechno už jsem to vyřešil. Kdyby měl někdo zájem přikládám zde i výsledný kód, nakonec to je ve většině řešeno pomocí jQuery. Nejsem žádnej expert na JS, ale mě to prozatím vyhovuje. Přijmu kritiku, ale nebudu to asi nějak extra upravovat. :-)
var buildGetUrl = function(params,item){
var url = '?';
for(var i=0;i<params.length;i++){
url+=params[i][0]+'='+item[params[i][1]]+'&';
}
return url;
}
var searchFunc = function(dataSource,inputName,outputParams,redirectUrl,redirectFalseSearchUrl,
sendValueFalseSearch) {
var urlParams;
var countChars = 0;
var searchText = null;
$(inputName).autocomplete({
source: dataSource,
response: function(event, ui) {
if(ui.content != null){
urlParams=buildGetUrl(outputParams,ui.content[0]);
$input = $(inputName);
$input.val(ui.content[0].value);
var field = $input.get(0);
field.setSelectionRange(countChars, $input.val().length);
field.focus();
}
else urlParams = null;
},
change: function( event, ui ) {
if(ui.item!=null)
window.location.href=redirectUrl+buildGetUrl(outputParams,ui.item);
},
focus: function(event,ui){
urlParams=buildGetUrl(outputParams,ui.item);
},
select: function( event, ui ) {
if(ui.item!=null)
window.location.href=redirectUrl+buildGetUrl(outputParams,ui.item);
},
});
$(inputName).on('keyup',function(event){
countChars=($(this).val().length);
}
)
$(inputName).on('keydown',function(event){
if(event.which==13){
if(urlParams)
window.location.href=redirectUrl+urlParams;
else if(redirectFalseSearchUrl)
window.location.href=(sendValueFalseSearch)?redirectFalseSearchUrl
+'?&'+sendValueFalseSearch+'='+$(this).val():redirectFalseSearchUrl;
}
});
};Zde příklad napojení na input: searchFunc({link ajax, 'search'=>'client', 'limit' =>10},"#searchClient",[["clientId","clientId"]]
,{link Client:detail},{link Client:new},['name']); |
||
| Kubo2 Profil |
#8 · Zasláno: 18. 3. 2014, 23:24:14
Prochy:
Takmer celé to je čisté JS. jQuery si zrejme potreboval iba na zjednodušenie vyhľadávania elementov a naväzovania udalostí. Kľudne si to všeobecne mohol napísať aj takto: // v inputElement máš referenciu na daný <input>
inputElement.onudalosť = function(e) {
var event = window.event || e;
// ...
} |
||
| Chamurappi Profil |
#9 · Zasláno: 19. 3. 2014, 12:24:57
Reaguji na Kuba2:
Také mě to na první pohled napadlo, ale na druhý pohled jsem si tam všiml $(inputName).autocomplete, což už bude kapku složitější funkce (i když ne o moc).
|
||
| Prochy Profil |
#10 · Zasláno: 19. 3. 2014, 20:42:30
Ano, jquery je využito hlavně u autocomplete. Asi bych to za nějaký čas vytvořil i se samotným javascriptem, ale jelikož už je využíváno jQuery, tak bylo pro mě snažší využít tohoto frameworku.
|
||
| Kubo2 Profil |
#11 · Zasláno: 21. 3. 2014, 19:19:24
Chamurappi:
„Také mě to na první pohled napadlo, ale na druhý pohled jsem si tam všiml $(inputName).autocomplete“ Máš pravdu. Mal by som byť dôslednejší. Druhý pohľad som totiž tým päťdesiatim riadkom už nevenoval. |
||
| Prochy Profil |
#12 · Zasláno: 23. 3. 2014, 09:22:42
Jinak měl bych jeden doplňující dotaz k JS. Proč tento alert vyhodí pouze to, co je v podmínce? Očekával bych, že se to spojí a vyhodí to celý řetězec. :-)
alert("Adresa1"+(1)?"Adresa2":"Adresa3"+"Adresa4");http://jsfiddle.net/5G4tG/ |
||
| juriad Profil |
#13 · Zasláno: 23. 3. 2014, 09:37:23
Protože plus má větší prioritu než ternární operátor:
Vyhodnotí se to napřed na: alert("Adresa11"?"Adresa2":"Adresa3Adresa4");alert("Adresa2");Ty ale nejspíš chceš uzávorkovat ternární výraz: alert("Adresa1"+((1)?"Adresa2":"Adresa3")+"Adresa4"); |
||
| Prochy Profil |
#14 · Zasláno: 23. 3. 2014, 09:39:05
Jasný, díky za vysvětlení. :-)
|
||
|
Časová prodleva: 10 let
|
|||
0