Mettre le focus sur un élément

**BiM** · 19/02/2013, 09h01

Bonjour,

La question est simple mais toutes les solutions que je trouve ne donnent aucun résultat, pourtant c'est simple

J'ai un raccourci vers une ancre et je voudrais que quand je clique sur ce raccourci, le focus (avec le curseur qui clignote se mette sur mon input text.

Mais ça ne fonctionne pas, pas de curseur !

Voilà le code que j'ai mis :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
	<head>
		<script type="text/javascript">
                        function searchFocus() {
                                document.getElementById("#search-field").focus();
                        }
                </script>
	</head>
	<body>
		<a href="#search" onclick="javascript:searchFocus()">Recherche</a>
	    <div id="search">
			<label for="search-field">Rechercher</label>
			<input type="text" name="textfield" id="search-field" title="Rechercher"/>
		</div>
	</body>
</html>

Quelqu'un a une idée sur cette question qui me paraît triviale ?

**SpaceFrog** · 19/02/2013, 09h10

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("#search-field").focus();

l'id de ton élément est id="#search-field" ou id="search-field";
...

**andry.aime** · 19/02/2013, 09h12

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
	<head>
		<script type="text/javascript">
                        function searchFocus() {
                                document.getElementById("search-field").focus();
                        }
                </script>
	</head>
	<body>
		<a href="#search" onclick="searchFocus()">Recherche</a>
	    <div id="search">
			<label for="search-field">Rechercher</label>
			<input type="text" name="textfield" id="search-field" title="Rechercher"/>
		</div>
	</body>
</html>

A+.

**BiM** · 19/02/2013, 09h47

Ah mais non en fait ça marchait très bien (le # était un reste de jQuery parce qu'à la base je le sélectionne en jQuery) mais le curseur se place, puis l'ancre est appelée, donc le curseur est perdu.

Comment je peux changer ça ?

**SpaceFrog** · 19/02/2013, 09h50

appelle l'ancre de l'input ...

**Bovino** · 19/02/2013, 10h24

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function goAndFocus(elem){
    var $elem = document.getElementById(elem); // Mise en cache de l'élément DOM (attention, le $ ici n'a pas de rapport avec jQuery ou PHP, c'est juste pour indiquer que elem est une chaine et $elem un élément HTML
    $elem.scrollIntoView(); // La page se place au niveau de l'ancre
    $elem.focus(); // Le champ prend le focus
}

**BiM** · 19/02/2013, 15h42

Merci pour vos réponses mais le but est de rester accessible, ce qui veut dire :

Pouvoir accéder à l'ancre sans Javascript (dans ce cas, bien évidemment le focus ne fonctionne pas)
Automatiquement lire le libellé de l'input, en même temps, si je met le focus, je sais pas s'il lit le libellé associé ou s'il le saute...

EDIT : Bon et pour des questions d'accessibilité, j'ai eu ma réponse d'une experte. C'est impossible de faire tout ce que je veux

Mettre le focus sur un élément

JavaScript

Discussions similaires

Partager

Partager