focus status wird nicht gesetzt

xorg1990 · 16. Okt. 2016

Hi, ich bin gerade dabei eine Tastatur nachzubauen, bzw nur die F-Tasten.
Aber ich bekomme es nicht hin das wenn eine Taste gedrückt wird wie bei hover grün schimmert.
Habe es auch mit jquery probiert ohne erfolg.

Code:

<!DOCTYPE html>
<html>

<head>
	<title>focus_test</title>
	<style type="text/css">
	.keyboard{
  width:560px; height: 40px;
  background-color: #111;
  margin: 0px auto;
  border-radius: 9px;
  padding: 30px;
  color: #eee;
}
		.key{
  width: 40px; height:40px;
  display:block;
  background-color:#333;
  text-align: left;
  padding-left: 8px;
  line-height: 29px;
  border-radius:2px;
  float:left; 
  margin-left: 7px;
  margin-bottom:2px;
  cursor: pointer;
  transition: box-shadow 0.7s ease;
}

.key:hover, .key:focus {box-shadow:0px 0px 10px #14B524; z-index:1000;}
.function{font-size: 1.2em; width:35px; height:30px; margin-bottom:15px;}

	</style>
	<script>
		function run(){
			(function(){
				document.querySelectorAll(".key")[0].focus();//F1 markieren
			})();
		}
	</script>
</head>
<body onload="run()">
	
		<div class="keyboard">
		  <div class="key function">
    F1
  </div>
  <div class="key function">
    F2
  </div>
  <div class="key function">
    F3
  </div>
  
  <div class="key function">
    F4
  </div>
	</div>
</body>
</html>

Die selbstausführende Funktion ist hier nur Demo und wird druch keypress ersetzt.

Eigentlich sollte F1 grün schimmern bis es mit blur() wider zurückgesetzt wird. Tut es aber nicht

andreax · 16. Okt. 2016

tabindex vergeben und outline auf none setzen.

und um das Erste Element in deiner Collection anzusprechen genügt document.querySelector(".key").focus(); //F1 markieren

MFG Andreas

xorg1990 · 16. Okt. 2016

Haut hin. :icon7:

andreax schrieb:
und um das Erste Element in deiner Collection anzusprechen genügt document.querySelector(".key").focus(); //F1 markieren

Ich möchte das Element markieren dessen Teste gedrückt wurde.
Mache via jquery
$(".key").eq(nth).focus();

andreax · 16. Okt. 2016

Sry. war nur eine allgemeine Info zum Unterschied von querySelector und querySelectorAll nicht unbedingt an dich gerichtet.

xorg1990 · 23. Okt. 2016

Hi, ich musste eine kleine Änderung vornehmen und das ganze Tabellarisch aufbauen. (mein Auftraggeber möchte das so). :grumpy:

Wenn ich jetzt via keypress den focus aktiviere wird zwar fokussiert aber sobald man irgendwo ins Dokument klickt ist der focus aufgehoben warum?

HTML:

.keyboard{
  width:373px; height: 240px;
  background-color: #111;
  margin: 0px auto 10px auto;
  border-radius: 9px;
  padding-left: 10px;
  padding: 7px;
  color: #eee;
}

.key{
  padding-bottom: 20px;
  width: 40px;
  background-color:#333;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.7s ease;
}

.key:hover, .key:focus { font-weight: bold; color:#000; text-shadow: 1px 1px 2px rgba(20,181,36, 1); border: 2px solid #fff; outline: none;}
.function{font-size: 1.2em; width:40px; height:30px; margin-bottom:5px; text-align: center;}



	<div class="keyboard">
	<table id="fKeys">
		<tr>
		<td align="center" colspan="3">	
		<label for="file-upload" class="custom-file-upload">
   		 <i class="fa fa-cloud-upload"></i>Upload wav
		</label>
		<input name="filesToUpload[]" id="file-upload" type="file" multiple>
		</td>
		</tr>
		<tr class="row">
			<td tabindex="1" id="F1" class="key function">F1</td>
			<td class="recName" id="rec1"></td>
			<td class="del"></td>
		</tr>
		<tr class="row">
			<td tabindex="1" id="F2" class="key function">F2</td>
			<td class="recName" id="rec2"></td>
			<td class="del"></td>
		</tr>
		<tr class="row">
			<td tabindex="1" id="F3" class="key function">F3</td>
			<td class="recName" id="rec3"></td>
			<td class="del"></td>
		</tr>
		<tr class="row">
			<td tabindex="1" id="F4" class="key function">F4</td>
			<td class="recName" id="rec4"></td>
			<td class="del"></td>
		</tr>

	</table>
	</div>

keypress Funktion ist wie folgt :

Code:

shortcut.add("F"+String(index),function() {
var nth = index-1;
this.name = name;
$(".key").each(function(){
	this.blur();
});
localforage.getItem(this.name, function(err, value){
	if(err){
		alert("Error getting record"+ err.message);
	}else{
	       mixedVoice = value.mixedRecord;
	        copyAudioRecord = value.orginalRecord;
		$(".key").eq(nth).focus();
	}
});							
});

Ist das nur bei mir oder warum geht der Tabulator in den Code-Tags nicht?

kkapsner · 23. Okt. 2016

Weil dann das Element, das du angeklickt hast, den Fokus hat...

Wenn du deine F-Buttons unahängig von allen anderen Seitenbestandteilen haben willst, darfst du auf keinen Fall mit :focus arbeiten, sondern musst über ganz normale Klassen gehen.

PS: Bei mir funktioniert der Tabulator in den Code-Tags wunderbar:

Code:

no indent
	indeted

xorg1990 · 23. Okt. 2016

kkapsner schrieb:
Wenn du deine F-Buttons unahängig von allen anderen Seitenbestandteilen haben willst, darfst du auf keinen Fall mit :focus arbeiten, sondern musst über ganz normale Klassen gehen.

Versteh ich jetzt nicht. Ich habe doch ne klasse "key".

kkapsner schrieb:
PS: Bei mir funktioniert der Tabulator in den Code-Tags wunderbar:

Oha, ich merke grade bei mir geht der Tabulator generell nicht in Chrome unter Ubuntu.
Von ein input zum andren kann ich aber springen.

andreax · 23. Okt. 2016

Du hast in allen Buttons den selben Tabindex

box-shadow will im ie nicht greifen aber text-shadow funkt.
den Border solltest du hier mit outline vertauschen weil der outline keinen Platz einnimmt und die Tds nicht verdrängt.
Hier war ein LINK wo ich rumprobiert habe.den Focus habe ich im css belassen aber ihn mit einem Clickevent im JS Unterwandert

leider bin ich im JQ nicht so Fit drum
is nur JS auch die Keyevents. im IE macht der F1 Button probleme weil der immer Die Hilfe aufruft.

@mikdoe Ist Die Rechtschreibprüfung aus od liegts an meinen Browser - Einstellungen?

xorg1990 · 23. Okt. 2016

Genial:icon7::icon7::icon7:
Du kannst deinen link löschen, habe mir eine Kopie gemacht.

andreax schrieb:
box-shadow will im ie nicht greifen aber text-shadow funkt.

IE ist bei mir sowieso raus, da ich was mit der web audio api mache.

andreax schrieb:
den Border solltest du hier mit outline vertauschen weil der outline keinen Platz einnimmt und die Tds nicht verdrängt.

Du kannst auch mit mir Klingonisch reden xD. Von den ganzen css Zeugs hab ich keinen Plan.. naja ein bisschen.

andreax schrieb:
leider bin ich im JQ nicht so Fit drum
is nur JS auch die Keyevents. im IE macht der F1 Button probleme weil der immer Die Hilfe aufruft.

Macht nix Du CSS, ich JQ, da ergänzen wir uns hervorragend:icon7:
Das Überschrieben der F-Tasten macht shortcut.js

andreax schrieb:
Ist Die Rechtschreibprüfung aus od liegts an meinen Browser - Einstellungen?

Ich glaube es hat hier nie eine Rechtschreibprüfung gegeben.

mikdoe · 23. Okt. 2016

andreax schrieb:
@mikdoe Ist Die Rechtschreibprüfung aus od liegts an meinen Browser - Einstellungen?

rechtschreibprüfung ist immer browsersache

xorg1990 · 23. Okt. 2016

mikdoe schrieb:
rechtschreibprüfung ist immer browsersache

Das ist so nicht richtig, Wenn Du z.B was in den Goolge Übersetzer falsch eingibst zB: "Gramar is bed"
Steht unten drunter "Übersetzung für Grammar is bad"
Welche API dafür verantwortlich ist weiß ich nicht

andreax · 24. Okt. 2016

@xorg1990 cool wenn du das Script verwenden kannst.

mikdoe · 24. Okt. 2016

ich denke doch dass er nicht google meint sondern dieses forum hier. und hier ist es immer browsersache.

andreax · 24. Okt. 2016

@mikdoe geht schon wieder alles palleti Paletti

kkapsner · 25. Okt. 2016

xorg1990 schrieb:
Versteh ich jetzt nicht. Ich habe doch ne klasse "key".

Ich meinte, dass du den Status, welcher Button gerade den "Fokus" hat, auch über eine CSS-Klasse speichern musst. Also nicht .focus() darauf aufrufen, sondern .classList.add() bzw. classList.remove(). Nachteil ist, dass du beim Setzen auch dem "alten" Button die Klasse wieder wegnehmen musst.

xorg1990 · 26. Okt. 2016

kkapsner schrieb:
.classList.add() bzw. classList.remove().

Aha, kannte ich so noch nicht.

- - - Aktualisiert - - -

@adreax, in deinem Code ist etwas nicht ganz koscher.
Wenn ich das einbinde kann ich zwar mit F1-F4 Fokussieren, aber alle andren F-keys sind disabled. Liegt das am preventDefault()?

Code:

			function VarHolder()
			{
			this.funkey = document.querySelectorAll('#fKeys .key');
			this.funkey[0].focus();	
			for(var i = 0;i<this.funkey.length;i++){
			this.funkey[i].addEventListener('click',glowBtn,false);
			}
			this.keyHolder = this.funkey[0];
			}
			var vh = new VarHolder();

			window.addEventListener("keydown",glowKey,true);
			
			function glowKey(e) {
			 e.preventDefault();
			switch(event.key){
			case 'F1': case 'F2': case 'F3': case 'F4':
			var kky = document.getElementById(event.key);
			if(vh.keyHolder){vh.keyHolder.classList.remove('glow');vh.keyHolder.blur();}
			kky.classList.add('glow');
			vh.keyHolder =  kky; break;
			default:return;
			}
			 
			};
			function glowBtn(event) {
			  if (event.defaultPrevented) {
			    return; // Should do nothing if the key event was already consumed.
			  }
			if(vh.keyHolder){vh.keyHolder.classList.remove('glow');vh.keyHolder.blur();}
			this.classList.add('glow');
			vh.keyHolder =  this;
			 
			  event.preventDefault();
			};

andreax · 27. Okt. 2016

nein das liegt an der switch nur case F1 - F4 alle anderen default lass aus return nix
der switch läuft durch bis F4 weil vorher kein brake gesetzt ist daher nur einmal die Anweisung
Dachte du brauchst nur die 4.
preventDefault sollte verhindern das die Events vom Browser verwendet werden wie beim href Attribut ZB.

ubs ja es verhindert alle anderen key-events auch es muss in den switch-block hinein

Code:

switch(event.key){
case 'F1': case 'F2': case 'F3': case 'F4':  
/////////////////////////
e.preventDefault();
/////////////////////////
var kky = document.getElementById(event.key);
if(vh.keyHolder){vh.keyHolder.classList.remove('glow');vh.keyHolder.blur();}
kky.classList.add('glow');
vh.keyHolder =  kky; break;
default:return;
}

xorg1990 · 27. Okt. 2016

andreax schrieb:
ubs ja es verhindert alle anderen key-events auch es muss in den switch-block hinein

Passiert, hab's gestern selber noch geändert. Bzw hab ich das PreventDeafult auskommentiert weil ich ja mit Shortcus.js arbeite, da ist das schon drinnen.

- - - Aktualisiert - - -

mikdoe schrieb:
ich denke doch dass er nicht google meint sondern dieses forum hier. und hier ist es immer browsersache.

Ja hier, Heist aber nicht das es in JS sowas nicht gibt.
https://github.com/cfinke/Typo.js/
oder mit server:
JavaScript Spell Check

xorg1990 · 30. Okt. 2016

@andreax dein Skript funzt nicht in FF.

Im switch das event.key sagt er mir event is not defined
FF 49 Ubuntu Linux

andreax · 31. Okt. 2016

ja weil ich bei den Listenern mal ein e übergeben und dann die keys mit event angesprochen habe . War c&p von mir.
Ursprünglich dachte ich das du dich selber um die Keyevents kümmern wolltest weil du JQ verwenden willst.
daher auch die zu lockere Herangehensweise.

es sind noch einige Unstimmigkeiten das Tabverhalten is auch komisch .
Ich bleib dran eventuell bringt es was mit focusin und focusout Events. Mal sehen.

- - - Aktualisiert - - -

Hier die letzten Ergebnisse auch FF tauglich GlowButtons.html

focus status wird nicht gesetzt

New member

andreax

Guest

New member

andreax

Guest

New member

Super Moderator

New member

andreax

Guest

New member

Moderator

New member

andreax

Guest

Moderator

andreax

Guest

Super Moderator

New member

andreax

Guest

New member

New member

andreax

Guest