1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: HTMLElement.focus()
slug: Web/API/HTMLElement/focus
tags:
- API
- HTML DOM
- HTMLElement
- Referencia
- metodo
translation_of: Web/API/HTMLOrForeignElement/focus
---
<div>{{ APIRef("HTML DOM") }}</div>
<p>El método <code><strong>HTMLElement.focus()</strong></code> fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.</p>
<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">element.focus();
element.focus(focusOption); // Object parameter</pre>
<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
<dl>
<dt><code>focusOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
<dd>Es un objeto con la siguiente propiedad:</dd>
<dd>
<dl>
<dt><code>preventScroll</code> {{optional_inline}}</dt>
<dd>Es un valor <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>:
<ul>
<li>Si es <code>false</code>, el método hará scroll hasta que el elemento esté visible en la ventana del navegador</li>
<li>Si es <code>true</code>, el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.</li>
</ul>
</dd>
</dl>
</dd>
</dl>
<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
<h3 id="Enfocar_un_campo_de_texto" name="Enfocar_un_campo_de_texto">Enfocar un campo de texto</h3>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">focusMethod = function getFocus() {
document.getElementById("myTextField").focus();
}</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><input type="text" id="myTextField" value="Campo de texto.">
<p></p>
<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>
</pre>
<h4 id="Resultado">Resultado</h4>
<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
<h3 id="Enfocar_un_botón" name="Enfocar_un_botón">Enfocar un botón</h3>
<h4 id="JavaScript_2">JavaScript</h4>
<pre class="brush: js">focusMethod = function getFocus() {
document.getElementById("myButton").focus();
}
</pre>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><button type="button" id="myButton">Púlsame!</button>
<p></p>
<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>
</pre>
<h4 id="Resultado_2">Resultado</h4>
<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
<h3 id="Enfocar_con_focusOption" name="Enfocar_con_focusOption">Enfocar con focusOption</h3>
<h4 id="JavaScript_3">JavaScript</h4>
<pre class="brush: js">focusScrollMethod = function getFocus() {
document.getElementById("myButton").focus({preventScroll:false});
}
focusNoScrollMethod = function getFocusWithoutScrolling() {
document.getElementById("myButton").focus({preventScroll:true});
}
</pre>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>
<div id="container" style="height: 1000px; width: 1000px;">
<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
</div>
</pre>
<h4 id="Resultado_3">Resultado</h4>
<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
<h2 id="Especificación" name="Especificación">Especificación</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
<td>{{Spec2('DOM2 HTML')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Notas">Notas</h2>
<p>Si se llama a <code>HTMLElement.focus()</code> desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método <code>event.preventDefault()</code> para evitar que el foco abandone <code>HTMLElement</code><strong>.</strong></p>
<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
<p>{{Compat("api.HTMLElement.focus")}}</p>
<h2 id="Ver_también" name="Ver_también">Ver también</h2>
<ul>
<li>Método DOM {{domxref("HTMLElement.blur()")}} para quitar el foco sobre un elemento.</li>
<li>{{ domxref("document.activeElement") }} para saber cuál es el elemento enfocado actualmente.</li>
</ul>
|
