From 128d0eb52eb60619951522bbe80ff57dbb1b7989 Mon Sep 17 00:00:00 2001 From: nahuelcoder Date: Tue, 4 Aug 2020 10:45:23 -0300 Subject: [PATCH 01/20] Traslation --- .../solution.view/index.html | 28 ++++----- .../source.view/index.html | 28 ++++----- .../1-deposit-calculator/task.md | 16 ++--- .../3-events-change-input/article.md | 61 ++++++++++--------- 4 files changed, 67 insertions(+), 66 deletions(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html index 4850b2ca9..d5786c6ef 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html @@ -23,33 +23,33 @@ - Deposit calculator. + Calculadora de depósito.
- + - + - + @@ -62,8 +62,8 @@
Initial depositDepósito inicial
How many months?¿Cúantos meses?
Interest per year?¿Interés anual?
- - + + diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html index 7f464020d..e5a0d7d54 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html @@ -23,33 +23,33 @@ - Deposit calculator. + Calculadora de depósito.
Was:Becomes:Inicial:Final:
- + - + - + @@ -62,8 +62,8 @@
Initial depositDepósito inicial
How many months?¿Cúantos meses?
Interest per year?¿Interés anual?
- - + + diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md index e324577a9..8d244fe66 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md @@ -2,20 +2,20 @@ importance: 5 --- -# Deposit calculator +# Calculadora de depósito -Create an interface that allows to enter a sum of bank deposit and percentage, then calculates how much it will be after given periods of time. +Crea una interfaz que permita ingresar una suma de depósito bancario y porcentaje, luego calcula cuanto será después de un periodo de tiempo determinado. -Here's the demo: +Acá una demostración: [iframe src="solution" height="350" border="1"] -Any input change should be processed immediately. +Cualquier modificación debe ser procesada de inmediato. -The formula is: +La fórmula es: ```js -// initial: the initial money sum -// interest: e.g. 0.05 means 5% per year -// years: how many years to wait +// initial: la suma inicial de dinero +// interest: e.g. 0.05 significa 5% anual +// years: cuantos años esperar let result = Math.round(initial * (1 + interest * years)); ``` diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index b43a305b3..6ad5b366a 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -1,21 +1,21 @@ -# Events: change, input, cut, copy, paste +# Eventos: change, input, cut, copy, paste -Let's cover various events that accompany data updates. +Veamos varios eventos que acompañan la actualzación de datos. -## Event: change +## Evento: change -The `change` event triggers when the element has finished changing. +El evento `change` se activa cuando el elemento finaliza un cambio. -For text inputs that means that the event occurs when it loses focus. +Para ingreso de texto significa que el evento ocurre cuando se pierde foco en el elemento. -For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event: +Por ejemplo, mientras estamos escribiendo en el siguiente cuadro de texto -- no hay evento. Pero cuando movemos el focus a otro lado, por ejemplo hacemos click en un botón, entonces ocurre el evento `change`: ```html autorun height=40 run ``` -For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes: +Para otros elementos: `select`, `input type=checkbox/radio` ocurre justo después de cambiar la opción seleccionada: ```html autorun height=40 run oninput: @@ -44,25 +44,26 @@ For instance: ``` -If we want to handle every modification of an `` then this event is the best choice. +Si queremos manejar cualquier modificación en un `` entonces este evento es la mejor opción. -On the other hand, `input` event doesn't trigger on keyboard input and other actions that do not involve value change, e.g. pressing arrow keys `key:⇦` `key:⇨` while in the input. +Por otro lado, el evento `input` no ocurre con ingresos de teclado u otras acciones que no involucren modificar un valor, e.g presionar las flechas de dirección `key:⇦` `key:⇨` mientras se está en el input. ```smart header="Can't prevent anything in `oninput`" -The `input` event occurs after the value is modified. +El evento `input` ocurre después de que el valor es modificado. -So we can't use `event.preventDefault()` there -- it's just too late, there would be no effect. +Por lo tanto no podemos usar `event.preventDefault()` en este caso -- ya es muy tarde por lo que no habría efecto. ``` -## Events: cut, copy, paste +## Eventos: cut, copy, paste -These events occur on cutting/copying/pasting a value. +Estos eventos ocurren al cortar/copiar/pegar un valor. -They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted. +Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y proveen acceso a los datos copiados/pegados. -We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted. +También podemos usar `event.preventDefault()`para cancelar la acción y que nada sea copiado/pegado. + +Por ejemplo, el código siguiente previene tales eventos y muestra que es los que estamos intentando cortar/copiar/pegar: -For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste: ```html autorun height=40 run @@ -74,20 +75,20 @@ For instance, the code below prevents all such events and shows what we are tryi ``` -Please note, that it's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it. +Por favor ten en cuenta que no solo es posible copiar/pegar texto, sino cualquier cosa. Por ejemplo, podemos copiar un archivo en el gestor de archivos del SO y pegarlo. -There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) that can work with different data types including files, read/write to the clipboard. +Hay una lista de métodos [en la especificación](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) que puede trabajar con diferentes tipos de datos incluyendo archivos, leer/escribir del portapapeles. -But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety, e.g. in `onclick` event handlers. +Pero ten en cuenta que el portapapeles es algo a nivel "global" del SO. La mayoría de los navegadores dan acceso a leer/escribir del portapapeles dentro del alcance del usuario por cuestiones de seguridad, e.g. al manejar eventos `onclick`. -Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. +Además está prohibido generar eventos "personalizados" del portapapeles con `dispatchEvent` en todos los navegadores excepto Firefox. -## Summary +## Resumen -Data change events: +Eventos de modificación de datos: -| Event | Description | Specials | +| Evento | Descripción | Especiales | |---------|----------|-------------| -| `change`| A value was changed. | For text inputs triggers on focus loss. | -| `input` | For text inputs on every change. | Triggers immediately unlike `change`. | -| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives read/write access to the clipboard. | +| `change`| Un valor fue cambiado. | Para ingreso de texto, ocurre al perderse el focus | +| `input` | Para ingresos de texto en cada cambio | Ocurre inmediatamente a diferencia de `change`. | +| `cut/copy/paste` | Acciones cortar/copiar/pegar | La acción uede ser cancelada. La propiedad `event.clipboardData` brinda acceso a leer/escribir del portapeles. | From d369922bb89ccfe64b889947fc8eb5f5f29bbe73 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Tue, 4 Aug 2020 13:40:43 -0300 Subject: [PATCH 02/20] Update 2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html Co-authored-by: joaquinelio --- .../1-deposit-calculator/solution.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html index d5786c6ef..271850ef0 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html @@ -34,7 +34,7 @@ - + - +
Was:Becomes:Inicial:Final:
¿Cúantos meses?¿Cuántos meses?
¿Cúantos meses?¿Cuántos meses? ` entonces este evento Por otro lado, el evento `input` no ocurre con ingresos de teclado u otras acciones que no involucren modificar un valor, e.g presionar las flechas de dirección `key:⇦` `key:⇨` mientras se está en el input. -```smart header="Can't prevent anything in `oninput`" +```smart header="No se puede evitar nada en `oninput`" El evento `input` ocurre después de que el valor es modificado. Por lo tanto no podemos usar `event.preventDefault()` en este caso -- ya es muy tarde por lo que no habría efecto. From b4680755bcc98c0619bf9d7ce13fd416fce2c0f0 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Tue, 4 Aug 2020 13:46:27 -0300 Subject: [PATCH 07/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: joaquinelio --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 9a6ff58ec..a915b8e4a 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -51,7 +51,7 @@ Por otro lado, el evento `input` no ocurre con ingresos de teclado u otras accio ```smart header="No se puede evitar nada en `oninput`" El evento `input` ocurre después de que el valor es modificado. -Por lo tanto no podemos usar `event.preventDefault()` en este caso -- ya es muy tarde por lo que no habría efecto. +Por lo tanto no podemos usar `event.preventDefault()` para evitar modificaciones en este caso -- ocurre demasiado tarde por lo que no habría efecto. ``` ## Eventos: cut, copy, paste From 9cb4d94411916ede0725e3050cf6f40ba36f83b8 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Tue, 4 Aug 2020 13:46:51 -0300 Subject: [PATCH 08/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: joaquinelio --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index a915b8e4a..6aa13c4ce 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -60,7 +60,7 @@ Estos eventos ocurren al cortar/copiar/pegar un valor. Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y proveen acceso a los datos copiados/pegados. -También podemos usar `event.preventDefault()`para cancelar la acción y que nada sea copiado/pegado. +También podemos usar `event.preventDefault()` para cancelar la acción y que nada sea copiado/pegado. Por ejemplo, el código siguiente previene tales eventos y muestra que es los que estamos intentando cortar/copiar/pegar: From 67a6dec7355b5fcbd27fd9ca774e8c391a586b30 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Tue, 4 Aug 2020 13:47:23 -0300 Subject: [PATCH 09/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: joaquinelio --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 6aa13c4ce..3c79bd1f1 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -62,7 +62,7 @@ Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-api También podemos usar `event.preventDefault()` para cancelar la acción y que nada sea copiado/pegado. -Por ejemplo, el código siguiente previene tales eventos y muestra que es los que estamos intentando cortar/copiar/pegar: +Por ejemplo, el código siguiente evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar: ```html autorun height=40 run From a7167a353a53c14961ddcae69b004e61ec42f4b9 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Tue, 4 Aug 2020 13:47:51 -0300 Subject: [PATCH 10/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: joaquinelio --- 2-ui/4-forms-controls/3-events-change-input/article.md | 1 - 1 file changed, 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 3c79bd1f1..db5cde638 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -61,7 +61,6 @@ Estos eventos ocurren al cortar/copiar/pegar un valor. Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y proveen acceso a los datos copiados/pegados. También podemos usar `event.preventDefault()` para cancelar la acción y que nada sea copiado/pegado. - Por ejemplo, el código siguiente evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar: From 91ecc00ae9d1e37f765d875bcc6b99b7eba9d30b Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Tue, 4 Aug 2020 13:48:25 -0300 Subject: [PATCH 11/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: joaquinelio --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index db5cde638..a3cf9b055 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -90,4 +90,4 @@ Eventos de modificación de datos: |---------|----------|-------------| | `change`| Un valor fue cambiado. | Para ingreso de texto, ocurre al perderse el focus | | `input` | Para ingresos de texto en cada cambio | Ocurre inmediatamente a diferencia de `change`. | -| `cut/copy/paste` | Acciones cortar/copiar/pegar | La acción uede ser cancelada. La propiedad `event.clipboardData` brinda acceso a leer/escribir del portapeles. | +| `cut/copy/paste` | Acciones cortar/copiar/pegar | La acción puede ser cancelada. La propiedad `event.clipboardData` brinda acceso a leer/escribir del portapeles. | From 8bd040efd4ffa09291cf728baf11044b0b7e2672 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:24:47 -0300 Subject: [PATCH 12/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: Ezequiel Castellanos <51804994+ezzep66@users.noreply.github.com> --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index a3cf9b055..7b71f4611 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -1,6 +1,6 @@ # Eventos: change, input, cut, copy, paste -Veamos varios eventos que acompañan la actualzación de datos. +Veamos varios eventos que acompañan la actualización de datos. ## Evento: change From fc9a2dea9ce5354ad5e4be32e66e395a65a23b72 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:25:14 -0300 Subject: [PATCH 13/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: Ezequiel Castellanos <51804994+ezzep66@users.noreply.github.com> --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 7b71f4611..d7af9e799 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -8,7 +8,7 @@ El evento `change` se activa cuando el elemento finaliza un cambio. Para ingreso de texto significa que el evento ocurre cuando se pierde foco en el elemento. -Por ejemplo, mientras estamos escribiendo en el siguiente cuadro de texto -- no hay evento. Pero cuando movemos el focus a otro lado, por ejemplo hacemos click en un botón, entonces ocurre el evento `change`: +Por ejemplo, mientras estamos escribiendo en el siguiente cuadro de texto -- no hay evento. Pero cuando movemos el focus (enfoque) a otro lado, por ejemplo hacemos click en un botón, entonces ocurre el evento `change`: ```html autorun height=40 run From 729fc970b7ba5e021615e2b77d719956ec27c397 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:25:41 -0300 Subject: [PATCH 14/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: Ezequiel Castellanos <51804994+ezzep66@users.noreply.github.com> --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index d7af9e799..e8147e124 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -46,7 +46,7 @@ Por ejemplo: Si queremos manejar cualquier modificación en un `` entonces este evento es la mejor opción. -Por otro lado, el evento `input` no ocurre con ingresos de teclado u otras acciones que no involucren modificar un valor, e.g presionar las flechas de dirección `key:⇦` `key:⇨` mientras se está en el input. +Por otro lado, el evento `input` no se activa con entradas del teclado u otras acciones que no involucren modificar un valor, e.g presionar las flechas de dirección `key:⇦` `key:⇨` mientras se está en el input. ```smart header="No se puede evitar nada en `oninput`" El evento `input` ocurre después de que el valor es modificado. From 9a0f19f44fb29c64846b46b5679c82990936bac8 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:29:16 -0300 Subject: [PATCH 15/20] Update article.md --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index e8147e124..7a61f5880 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -51,7 +51,7 @@ Por otro lado, el evento `input` no se activa con entradas del teclado u otras a ```smart header="No se puede evitar nada en `oninput`" El evento `input` ocurre después de que el valor es modificado. -Por lo tanto no podemos usar `event.preventDefault()` para evitar modificaciones en este caso -- ocurre demasiado tarde por lo que no habría efecto. +Por lo tanto no podemos usar `event.preventDefault()` para evitar modificaciones, en este caso ya es demasiado tarde por lo que no habría efecto. ``` ## Eventos: cut, copy, paste From 433eff80d7882bfc18f66d3f72ffb2a002f893d7 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:29:39 -0300 Subject: [PATCH 16/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: Ezequiel Castellanos <51804994+ezzep66@users.noreply.github.com> --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 7a61f5880..87e41e734 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -58,7 +58,7 @@ Por lo tanto no podemos usar `event.preventDefault()` para evitar modificaciones Estos eventos ocurren al cortar/copiar/pegar un valor. -Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y proveen acceso a los datos copiados/pegados. +Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y dan acceso a los datos copiados/pegados. También podemos usar `event.preventDefault()` para cancelar la acción y que nada sea copiado/pegado. Por ejemplo, el código siguiente evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar: From 10bd620f357aec4c41b9270146cbe9176a06fdb3 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:30:23 -0300 Subject: [PATCH 17/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: Ezequiel Castellanos <51804994+ezzep66@users.noreply.github.com> --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 87e41e734..965e57d04 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -61,7 +61,7 @@ Estos eventos ocurren al cortar/copiar/pegar un valor. Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y dan acceso a los datos copiados/pegados. También podemos usar `event.preventDefault()` para cancelar la acción y que nada sea copiado/pegado. -Por ejemplo, el código siguiente evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar: +Por ejemplo, el siguiente código evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar: ```html autorun height=40 run From c5f2ec2b1c818852c0e38913da14638d3d789924 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:30:48 -0300 Subject: [PATCH 18/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: Ezequiel Castellanos <51804994+ezzep66@users.noreply.github.com> --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 965e57d04..6d6275da5 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -76,7 +76,7 @@ Por ejemplo, el siguiente código evita tales eventos y muestra qué es los que Por favor ten en cuenta que no solo es posible copiar/pegar texto, sino cualquier cosa. Por ejemplo, podemos copiar un archivo en el gestor de archivos del SO y pegarlo. -Hay una lista de métodos [en la especificación](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) que puede trabajar con diferentes tipos de datos incluyendo archivos, leer/escribir del portapapeles. +Hay una lista de métodos [en la especificación](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) que puede funcionar con diferentes tipos de datos incluyendo archivos, leer/escribir del portapapeles. Pero ten en cuenta que el portapapeles es algo a nivel "global" del SO. La mayoría de los navegadores dan acceso a leer/escribir del portapapeles dentro del alcance del usuario por cuestiones de seguridad, e.g. al manejar eventos `onclick`. From 3dac9e0433cd4aca259e491bdee46ed0b34964a5 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:31:11 -0300 Subject: [PATCH 19/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: Ezequiel Castellanos <51804994+ezzep66@users.noreply.github.com> --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 6d6275da5..c81ca8233 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -88,6 +88,6 @@ Eventos de modificación de datos: | Evento | Descripción | Especiales | |---------|----------|-------------| -| `change`| Un valor fue cambiado. | Para ingreso de texto, ocurre al perderse el focus | +| `change`| Un valor fue cambiado. | Para ingreso de texto, ocurre al perderse el enfoque | | `input` | Para ingresos de texto en cada cambio | Ocurre inmediatamente a diferencia de `change`. | | `cut/copy/paste` | Acciones cortar/copiar/pegar | La acción puede ser cancelada. La propiedad `event.clipboardData` brinda acceso a leer/escribir del portapeles. | From 0b8adf2c81c70d4533cf5616627d1f85855206e5 Mon Sep 17 00:00:00 2001 From: Nahuel Bustos Date: Wed, 5 Aug 2020 10:31:23 -0300 Subject: [PATCH 20/20] Update 2-ui/4-forms-controls/3-events-change-input/article.md Co-authored-by: Ezequiel Castellanos <51804994+ezzep66@users.noreply.github.com> --- 2-ui/4-forms-controls/3-events-change-input/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index c81ca8233..69e862a13 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -89,5 +89,5 @@ Eventos de modificación de datos: | Evento | Descripción | Especiales | |---------|----------|-------------| | `change`| Un valor fue cambiado. | Para ingreso de texto, ocurre al perderse el enfoque | -| `input` | Para ingresos de texto en cada cambio | Ocurre inmediatamente a diferencia de `change`. | +| `input` | Para entrada de texto en cada cambio | Ocurre inmediatamente a diferencia de `change`. | | `cut/copy/paste` | Acciones cortar/copiar/pegar | La acción puede ser cancelada. La propiedad `event.clipboardData` brinda acceso a leer/escribir del portapeles. |