cómo traducir un marcador de posición

01 Aug, 2023 Programación 0

Estoy teniendo problemas tratando de traducir mi marcador de posición.

<template id="dynamicTemplate">
</template>

<select id="languageSwitch">
    <option value="nl">Nederlands</option>
    <option value="en">English</option>
</select>

<input type="text" placeholder="voornaam" data-translate="homepage.voornaam" id="voornaam"  required>
<input type="text" placeholder="achternaam" id="achternaam" required>

Estoy usando un script que funciona con botones y texto, pero no puedo solucionar este marcador de posición.

Este es el script:

       //vertaling
var initialLanguage = "en";

var translations = {
    homepage: { 
voornaam: {
            "nl":"voornaam",
            "en": "First Name"
        },

Aquí está el código que uso para CSS:

    /* vertaling test */
[data-translate] {
    visibility: hidden;
}

[data-translate][translated] {
    visibility: visible;
}

¿Alguien sabe dónde puedo colocar el atributo “data-translate” para que el código funcione? Mi escuela quiere que use las traducciones JavaScript.

Saludos y gracias por leer mi pregunta.

davy.ai

August 1, 2023 at 12:22 am

Para usar las traducciones de JS para su marcador de posición, puede agregar el atributo data-translate a sus elementos de entrada y establecer sus valores para que coincidan con las claves en su objeto de traducciones. Luego, en su código JS, puede usar el método querySelectorAll para seleccionar todos los elementos con el atributo data-translate y establecer sus valores de marcador de posición utilizando el idioma seleccionado.

Aquí hay un ejemplo de código actualizado:

<!-- agregar el atributo data-translate a los elementos de entrada -->
<input type="text" placeholder="" data-translate="homepage.voornaam" id="voornaam" required="">
<input type="text" placeholder="" data-translate="homepage.achternaam" id="achternaam" required="">

// establecer el idioma inicial
var initialLanguage = "en";

// objeto de traducciones
var translations = {
  homepage: {
    voornaam: {
      "nl": "voornaam",
      "en": "Nombre"
    },
    achternaam: {
      "nl": "achternaam",
      "en": "Apellido"
    }
  }
};

// función para traducir los marcadores de posición
function translatePlaceholders(language) {
  // seleccionar los elementos de entrada con el atributo data-translate
  var inputs = document.querySelectorAll('input[data-translate]');

  // recorrer los elementos seleccionados
  inputs.forEach(function(input) {
    // establecer el valor del marcador de posición basado en el idioma seleccionado y el valor de data-translate
    input.placeholder = translations[input.dataset.translate][language];
  });
}

// llamar a la función translatePlaceholders con el idioma inicial
translatePlaceholders(initialLanguage);

// agregar un event listener al elemento de selección de idioma
document.getElementById("languageSwitch").addEventListener("change", function() {
  // obtener el valor de idioma seleccionado
  var language = this.value;
  // llamar a la función translatePlaceholders con el idioma seleccionado
  translatePlaceholders(language);
});

En este ejemplo, la función translatePlaceholders selecciona todos los elementos de entrada con el atributo data-translate, los recorre y establece sus valores de marcador de posición según el idioma seleccionado y el valor de data-translate. La función se llama inicialmente con la variable initialLanguage y también cuando se cambia el elemento de selección de idioma.

es.davy.ai

¿Tienes una pregunta?

cómo traducir un marcador de posición

Answer

davy.ai