Forum PHP.pl > [JavaScript] Wyciąganie z input do zmiennej

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Wyciąganie z input do zmiennej

php__amator

3.04.2014, 23:47:22

Witajcie drodzy przedszkolacy

Tak sobie walczę z JSem od pewnego czasu, co napotkam jakiś problem to pytam jak przystało na przedszkolaka.

UWAGA !

W moim skrypcie zmienna odpowiadająca za wybór formy elementu jest uzależniona od tego na którym w danym momencie znajduje się focus.
Z tego inputa muszę wyciągnąć nazwę lub wartość i zmienna musi tę wartość dostać. Wartość zmiennej podstawiona do skryptu pozwala wybrać odpowiedni blok danych.

Jak powinno to wyglądać ?

Próbuję getElementById, getElementByName ale wciąż moja zmienna świeci pustką

Nie wiem jak mam to zrobić

Podpowiedzcie proszę.

Zdaję sobie sprawę, że to co poniżej to jakaś bzdura ale niech tam, wymyśliłem coś takiego:

[JAVASCRIPT] pobierz, plaintext 
var layout = function () {
		input.class = _input;
		input.name();
		document.write(layout);	
		};
[JAVASCRIPT] pobierz, plaintext

i takie coś:

[JAVASCRIPT] pobierz, plaintext 
var layout = function () {
	document.getElementsById().innerHTML =
document.getElementsById().name;
document.write(layout);
};
[JAVASCRIPT] pobierz, plaintext

ale skutek jest taki, że pokazuje mi tylko sformatowanego div'a i nic wewnątrz

Proszę o wyrozumiałość jam jest tylko js amator
dopiero zaczynam :")

Turson

4.04.2014, 07:35:57

.val()

w getElementById() musisz w nawiasie podać to id

Sephirus

4.04.2014, 07:38:35

Pomimo odpowiedzi przedmówcy prosił bym o lepsze rozpisanie tematu bo w sumie nie do końca rozumiem. Napisz po kolei co dokładnie chcesz uzyskać i jak to ma działać.

Kod który przedstawiłeś faktycznie nie ma sensu za bardzo...

trueblue

4.04.2014, 08:01:20

Cytat(phpamator @ 4.04.2014, 00:47:22 )

W moim skrypcie zmienna odpowiadająca za wybór formy elementu jest uzależniona od tego na którym w danym momencie znajduje się focus.
Z tego inputa muszę wyciągnąć nazwę lub wartość i zmienna musi tę wartość dostać. Wartość zmiennej podstawiona do skryptu pozwala wybrać odpowiedni blok danych.

Nie ma metody getElementsById, bo z założenia każdy element ma unikalne ID.
Zakładam, że robisz to w czystym JS.
Możesz to zrobić na dwa sposoby:
- w HTML5 masz metodę na dokumencie: document.activeElement, możesz sprawdzić czy to input tekstowy, pobrać wartość,
- możesz też pobrać wszystkie inputy metodą getElementsByTagName, w pętli sprawdzić czy typ to text, przypiąć zdarzenia na focus oraz blur i w zdarzeniach przypisywać do zmiennej wartości z pól. (W czystym JS zdarzenia przypinamy inaczej w IE: http://msdn.microsoft.com/en-us/magazine/ff728624.aspx)

php__amator

4.04.2014, 09:35:55

Cytat(Turson @ 4.04.2014, 07:35:57 )

.val()

w getElementById() musisz w nawiasie podać to id

[HTML] pobierz, plaintext 
 
        <script type="text/javascript">
        	window.onload = function () {
        		jsKB('keys');
			jsKB('kb_button2');
			}
        </script> 
 
</head>
	<body>
    	<div id="wrapper">
    		<div id="main">
 
    			<div class="separate">
    				Extended <input class="extended" type="text" id="keys1" name="extended"/>
     			<div class="separate">
    				Letters and digits <input class="full" type="text" id="keys2" name="full"/>
     			<div class="separate">
    				Digits <input class="half" type="text" id="keys3" name="half"/>
    			<div class="separate">
    				<textarea id="kb_area" rows="8" cols="30"></textarea><img src="kb.png" 
 
id="kb_button2" name="full" alt="keyboard button"/>
				</div>
				</div>
			</div>
		</div>
        </div>
        </div>
 
[HTML] pobierz, plaintext

[JAVASCRIPT] pobierz, plaintext 
...
var layout = function () {
	document.getElementsById().innerHTML =
document.getElementsById('keys').name;
document.write(layout);
};
...
[JAVASCRIPT] pobierz, plaintext

Turson

4.04.2014, 10:06:50

Nie możesz mieć tego samego id więcej niż raz...

php__amator

4.04.2014, 10:16:43

Pomijajac ID, jak to zrobic ?
Zalozmy, ze id dla kazdego bedzie inne, w tym wypadku lepiej byloby pobrac nazwe i wartosc albo klase

Turson

4.04.2014, 10:19:35

Ale co ty chcesz zrobić? Pierwszy post jakiś niejasny

php__amator

4.04.2014, 10:23:30

Wyjasniam:

na stronie mam dwa inputy

[HTML] pobierz, plaintext 
pierwszy do wprowadzania ilosci tylko cyfry <input id="half" value="half">
drugi do wprowadzania kodow cyfry i litery <input id="full" value="full">
[HTML] pobierz, plaintext

zaleznie od tego ktory jest focus zmienna keys przyjmuje wartosc z value inputa i wlacza sie odpowiedni modul klawiatury.

Turson

4.04.2014, 10:34:09

jquery

[JAVASCRIPT] pobierz, plaintext 
$("#half").on('focus', function(){
    //akcja
})
[JAVASCRIPT] pobierz, plaintext

analogicznie dla #full

php__amator

4.04.2014, 10:50:42

$("#half").on('focus', function(){
var layout = half;
});

Turson

4.04.2014, 10:52:55

jeżeli chcesz wyciągnąc value, to var layout = $(this).val();

php__amator

4.04.2014, 12:39:49

$("#half").on(focus, function(){
var layout = $this().val();
});
jesli value

a jesli name ?
$("#half").on('focus', function(){
var layout = $this().attr('name');
});

Turson

4.04.2014, 12:43:09

$(this)
$this()
widzisz różnicę?
Odpal konsolę przeglądarkową najlepiej, to zobaczysz błąd od razu

php__amator

4.04.2014, 14:15:53

D.U. .A.

formularz

[HTML] pobierz, plaintext 
        <script type="text/javascript" src="../jskb.js"></script>
        <script type="text/javascript">
        	window.onload = function () {
 
        		jsKB('full');
        		jsKB('half');
        		jsKB('extended');
        		jsKB('kb_area','kb_button2');
			}
        </script> 
 
 
 
</head>
	<body>
    	<div id="wrapper">
    		<div id="main">
 
     			<div class="separate">
    				Letters and digits <input id="full" name="full" value="">
<div class="separate">
    				Letters and digits <input id="half" name="half" value="">
<div class="separate">
    				Letters and digits <input id="extended" name="extended" value="">
     			<div class="separate">
    				<textarea id="kb_area" rows="8" cols="30"></textarea><img src="kb.png" id="kb_button2" name="full" alt="keyboard button"/>
				</div>
 
		</div>
        </div>
        </div>
    </body>
[HTML] pobierz, plaintext

skrypt z zewnetrznego pliku (oczywiscie tylko fragment)

[JAVASCRIPT] pobierz, plaintext 
 
...
	$("#full").on('focus', function(){
	var layout = $(this).name(); /* tu spodziewam sie, ze zmienna layout przyjmie wartosc name z input'a */
});
        $("#full").on('focus', function(){
	var layout = $(this).var(); /* tu spodziewam sie, ze zmienna layout przyjmie wartosc value z input'a */
});
...
 
[JAVASCRIPT] pobierz, plaintext

i dalej ... nie moge uzyskac oczekiwanego efektu

trueblue

4.04.2014, 14:18:24

Wcześniej pobierałeś poprawnie zarówno name i value.
Tyle, że od $this().

Turson

4.04.2014, 14:19:15

http://stackoverflow.com/questions/3513809...-value-of-input

php__amator

5.04.2014, 13:02:07

W teorii powinno być ok. Praktyka jednak wygląda inaczej.
Poszedłem za waszymi uwagami. Obczytałem się na jquery
wklepałem zgodnie z zaleceniem i .....
D.U. .A.

[JAVASCRIPT] pobierz, plaintext 
 
	$("#half").on('focus', function(){ /* w tym wypadku var layout = half */
		var layout = $(this).attr('name');
		});
 
	$("#full").on('focus', function(){ /* w tym wypadku var layout = full */
		var layout = $(this).attr('name');
		document.writeln(layout);
		});
 
	$("#extended").on('focus', function(){ /* w tym wypadku var layout = extended */
		var layout = $(this).attr('name');
		document.writeln(layout);
		});
 
[JAVASCRIPT] pobierz, plaintext

I może i się równa ale nijak nie wiem jak to sprawdzić bo gdy chcę wyświetlić
document.write(layout);
pokazuje mi NIC
a w konsoli Chrome'a
Uncaught ReferenceError: layout is not defined jskb.js:184
generateKeys jskb.js:184
keyboard jskb.js:432
(anonymous function) jskb.js:482
window.onload
bo faktycznie w chwili ładowania layout'u niema jeszcze, dopiero gdy kliknę na input
powinna pojawić się jakaś wartość w tej zmiennej.
Nie wiem co z tym zrobić

jeśli natomiast ustawię val layout = ''
błąd znika ale gdy kliknę na input dalej nic się nie dzieje a powinna pojawić się klawiatura określonego typu.

Turson

5.04.2014, 13:05:33

http://jsfiddle.net/84EvX/
Może nie podczepiłeś biblioteki jquery?

trueblue

5.04.2014, 13:21:19

Piszesz o document.writeln(layout), które zawarłeś w funkcjach onFocus?
Bo jeśli z innego miejsca próbujesz wyświetlić zmienną "layout", to powinna być globalna, obecnie w każdej z tych funkcji deklarujesz ją jako zmienną lokalną.
Usuń "var" z funkcji onFocus.

php__amator

5.04.2014, 13:56:24

Turson: jquery podłączone i na 100% działa.

TruBlue: czy usunę var czy nie, efekt ten sam

Wrzucę kod na serwer, W ten sposób będziemożna zobaczyć co się dzieje

http://roberta.uznam.net.pl/czysta/demo/

Jak klikniesz na input albo konkę klawiatury pojawić się powinien sformatowany <div>

ale ponieważ var layout = '' jest pusty.

trueblue

5.04.2014, 14:24:07

Coś pomieszałeś.
Do zmiennej layout przypisujesz string, a potem traktujesz ją jak tablicę: for (var i=0; i < layout.length; i++) {

php__amator

5.04.2014, 14:51:21

Czekaj, wyjaśniam.
layout to zmienna w której pierwotnie zapisane było to co w tej chwili jest w keytables.js jako var extended, var full i var half
to jak zauważyłeś trzy rózne zestawy klawiszy (klawiatury ekranowej)
moim zamiarem jest nie zmieniając niczego w kodzie poza wartością jaka ma być przyjmowana w zmiennej layout i na tej podstawie ma byc wybierana klawiatura
czyli var layout = var extended czy var full albo var half zależnie od tego w który input klepniesz.

tak wyglądało wcześniej. Wartość layout wyglądała tak:

[JAVASCRIPT] pobierz, plaintext 
...
	var layout = [
      ['`','~'],['1','!'],['2','@'],['3','#'],['4','$'],['5','%'],['6','^'],['7','&'],['8','*'],['9','('],['0',')'],['-','_'],['+','='],['BackSp'],
      ['Tab'],['q','Q'],['w','W'],['e','E','e','E'],['r','R'],['t','T'],['y','Y'],['u','U'],['i','I'],['o','O','ó','Ó'],['p','P'],['[','{'],[']','}'],['\\','|'],
      ['CapsLk'],['a','A','a','A'],['s','S','s','S'],['d','D'],['f','F'],['g','G'],['h','H'],['j','J'],['k','K'],['l','L','l','L'],[';',':'],['\'','"'],['Enter'],
      ['Shift'],['z','Z','z','Z'],['x','X','z','Z'],['c','C','c','C'],['v','V'],['b','B'],['n','N','n','N'],['m','M'],[',','<'],['.','>'],['/','?'],['Shift'],
      ['Space'],['Alt']
    ];
...
[JAVASCRIPT] pobierz, plaintext

więc żeby zależnie od tego który input jest 'focus' odpala się odpowiednia do niego klawiaturka.

w sumie wywaliłem te układy klawiszy do osobnego, żeby było mi wygodniej je edytować
można to poźniej spowrotem wrzucić do jskb.js

mam nadzieję, że w miarę czytelnie opisałem o co mi chodzi ?

Reasumując jeśli podstawię do zmiennej var layout = "nazwa zmiennej z keytables.js" np full to mi wyświetla klwiature ze zmiennej var full i tak jest ok, jeśli zmienię na var layout = half pokazuje klawiature ze zmiennej half czyli same cyfry a jesli bede chciał wyświetlić pełną klawiaturę
wtedy zmienna var layout = extended.

Działa jeśli podstawiam ręcznie

trueblue

5.04.2014, 14:57:59

Wiem co namieszałeś i co chciałeś osiągnąć.
Może ten krótki przykład Cię naprowadzi:

[HTML] pobierz, plaintext 
var kbLayouts={
	'extended': [
      ['`','~'],['1','!'],['2','@'],['3','#'],['4','$'],['5','%'],['6','^'],['7','&'],['8','*'],['9','('],['0',')'],['-','_'],['+','='],['BackSp'],
      ['Tab'],['q','Q'],['w','W'],['e','E','e','E'],['r','R'],['t','T'],['y','Y'],['u','U'],['i','I'],['o','O','ó','Ó'],['p','P'],['[','{'],[']','}'],['\\','|'],
      ['CapsLk'],['a','A','a','A'],['s','S','s','S'],['d','D'],['f','F'],['g','G'],['h','H'],['j','J'],['k','K'],['l','L','l','L'],[';',':'],['\'','"'],['Enter'],
      ['Shift'],['z','Z','z','Z'],['x','X','z','Z'],['c','C','c','C'],['v','V'],['b','B'],['n','N','n','N'],['m','M'],[',','<'],['.','>'],['/','?'],['Shift'],
      ['Space'],['Alt']
    ],
 
	'full' : [
      ['A'],['B'],['C'],['D'],['E'],['F'],['G'],['H'],['I'],['J'],['K'],['L'],['M'],['N'],['1'],['2'],['3'],['4'],['5'],['6'],['7'],['8'],['9'],['0'],['BackSp']
    ],
 
	'half':[
      ['1'],['2'],['3'],['4'],['5'],['6'],['7'],['8'],['9'],['0'],['BackSp']
    ]};
 
alert(kbLayouts['half']);
[HTML] pobierz, plaintext

php__amator

5.04.2014, 15:14:52

hmmm, nie bardzo mnie naprowadziło ale, ciekawe rozwiązanie.

[JAVASCRIPT] pobierz, plaintext 
 
	var layout ;
	layout = 
		$(this).on('focus', function(){
		keylayouts = $(this).attr('name');
		});
 
[JAVASCRIPT] pobierz, plaintext

teraz dla odmieny pojawia mi się <div> z jedny przyciskiem opisanym jako undefined

trueblue

5.04.2014, 15:25:48

To był przykład. Wyrzuć ten alert.

Początek tak:

[HTML] pobierz, plaintext 
var layout ;
$(this).on('focus', function(){ //tu osobna obsługa zdarzenia dla każdego pola (tak jak miałeś wcześniej)
 layout = $(this).attr('name');
});
 
var shift = false;
var alt = false;
//document.write(name); //do wywalenia
[HTML] pobierz, plaintext

Teraz jeśli focus ma textarea, to w layout jest wartość 'extended' i aby odwołać się do definicji klawiszy 'extended', to: keylayouts[layout] (analogicznie będzie dla pozostałych układów klawiatury).

php__amator

5.04.2014, 17:34:35

Cytat(trueblue @ 5.04.2014, 15:25:48 )

To był przykład. Wyrzuć ten alert.

Początek tak:

[HTML] pobierz, plaintext 
var layout ;
$(this).on('focus', function(){ //tu osobna obsługa zdarzenia dla każdego pola (tak jak miałeś wcześniej)
 layout = $(this).attr('name');
});
 
var shift = false;
var alt = false;
//document.write(name); //do wywalenia
[HTML] pobierz, plaintext

Kurcze, jak sprawdzam działanie na jsfiddle to wszystko pięknie
a jak to samo zrobię u siebie ... kicha. nie czaję ... ;(

trueblue

5.04.2014, 17:56:16

Za każdym razem coś "psujesz".

Zamiast:

[HTML] pobierz, plaintext 
var layout = keylayout;
 
var keylayout;
$(this).on('focus', function(){
 
$("#full").on("focus", function(){
    var keylayout = $(this).attr('id');
});
 
$("#half").on("focus", function(){
    var keylayout = $(this).attr('name');
});
 
$("#extended").on("focus", function(){
    var keylayout = $(this).attr('name');
});
});
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
var layout; //puste, bo do tego będą spływać wartości
 
 
$("#full").on("focus", function(){
    layout = $(this).attr('id'); //moze być id, ale abyś pamiętał, żeby go nie usuwać z html
});
 
$("#half").on("focus", function(){
    layout  = $(this).attr('name');
});
 
$("#extended").on("focus", function(){
    layout  = $(this).attr('name');
});
[HTML] pobierz, plaintext

php__amator

11.04.2014, 23:51:42

Nie mogę się skupić i nic mi nie idzie dzisiaj.
Raz zrobię jak piszesz, pokazuje w alertach co wybrałem, drugi raz zrobię to samo, nie pokazuje, tracę cierpliwość już do tego

Teraz dla odmiany, nie pokazuje niczego
nawet alerty sie nie pokazują ....

Nie wiem co może być powodem, nawet jeśli wszystko jest OK,
Jeśli ręcznie podstawiam nazwe zmiennej wszystko jest ok a jesli próbuję wyciagnac
prze z jquery ni ...chuchu

....
Zastosowalem sie bardzo szczególowo do podanych informacji i nic.

Nadszedł weekend, czas powalczyć/

W tygodniu nie miałem zbyt wiele czasu aby posiedzieć na forum, zamierzam więc to nadrobić.
Jakoś do tej pory nie znalazłem sposobu na zmuszenie do działania tego ..... skryptu

W dalszym ciągu próbuję. Testuję na jsfiddle i teoretycznie wszystko jest ok, wszystko dziala, po wrzuceniu do skryptu przestaje i nawet nie pojawiają się alerty co mnie zastanawia.

http://jsfiddle.net/GF2jM/14/

dokladnie tak zrobilem i tutaj dziala, czego dowodem jest alert potwierdzajacy wykonanie.
Jesli teraz podstawie to do skryptu przestaje dzialac.
Teraz jeśli pobrany name inputa zostanie przekazany do zmiennej layout to w wyniku tego powinnien zostac wyświetlony element tablicy o takim name lub numer.
tak przynajmniej kopmbinuje.
Reasumująć:
Ponawiam pytanie i prośbę o wsparcie albo może coś więcej niż tylko podpowiedź.

[JAVASCRIPT] pobierz, plaintext 
var layout = keylayout;
 
$("#half").on("focus", function(){ /* w chwili wyboru input "half" powinna zostac włączona klawiaturka 1 */
    keylayout  = $(this).attr('name');
    alert(keylayout);
});
$("#full").on("focus", function(){ /* w chwili wyboru input "full" powinna zostac włączona klawiaturka 2 */
    keylayout  = $(this).attr('name');
    alert(keylayout);
});
$("#maxi").on("focus", function(){ /* i w chwili wyboru input "maxi" powinna zostac włączona klawiaturka 3 */
    keylayout  = $(this).attr('name');
    alert(keylayout);
});
 
[JAVASCRIPT] pobierz, plaintext

Co robię źle ?
pozdrawiam
php/js amator

trueblue

12.04.2014, 11:35:55

Najlepiej gdybyś pokazał oryginalny skrypt, który generował wszystkie 3 rodzaje klawiatur.

php__amator

16.04.2014, 23:08:24

podeślę ci na PW ok ?

w pierwotnej formie skrypt generował¾ tylko jedną klawiature

dopiero niedawno wpadłem na pomysł, żeby go zmodyfikować i mieć możliwość wyboru
jeśli np wybiore keylayout[1] to taka jesli keylayout[2] to inna itd.
w sumie to jak na stale wpiszę, że layout = keylayout[1] to mi wyswietli co chcę ale chciałbym aby to się pojawialo (klawisze) jak kustawie focus na odpowiedni input

http://jsfiddle.net/GF2jM/25/
tu działa pięknie

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.