Yo en la pagina jsfiddle estoy intentando hacer un proyecto con un código JavaScript en el que, cuando escribas algo en un cuadro de texto, te aparezca lo mismo pero al revés.
¿Cómo se hace?
Yo en la pagina jsfiddle estoy intentando hacer un proyecto con un código JavaScript en el que, cuando escribas algo en un cuadro de texto, te aparezca lo mismo pero al revés.
¿Cómo se hace?
Sin JavaScript, puro CSS:
#texto {
width: 100%;
direction: rtl;
unicode-bidi: bidi-override;
}
<input type="text" id="texto">
Usa la propiedad direction con el valor rtl
(right to left), normalmente empleado para textos en lenguajes que se escriben de derecha a izquierda (árabe por ejemplo). Lo que hace es alinear el texto a la derecha, pero aún se sigue respetando la dirección de los caracteres escritos (si se escribe en español, se sigue escribiendo de izquierda a derecha, alineado a la derecha).
Y, actuando a la par, la propiedad unicode-bidi con el valor bidi-override
, que fuerza a que los caracteres, por más que tengan otra dirección, vayan en el sentido definido en direction
. Así, se logra que se escriba en español pero vayan de derecha a izquierda (como se definió en direction: rtl;
).
Aunque no dijiste cómo lo querías al revés...
(oɥɔǝɹǝp lɐ ʎoʇsǝ oʎ) ɐʇlǝnʌ opɐp oƃlɐ ɐɹǝ sɐzᴉnb
document
.getElementById('texto')
.addEventListener('input',
function(e) {
document
.getElementById('resultado')
.innerText = flipString(e.target.value);
}
);
//función copiada de https://gist.github.com/jasny/9807617
function flipString(aString) {
var last = aString.length - 1;
var result = new Array(aString.length)
for (var i = last; i >= 0; --i) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last - i] = r != undefined ? r : c
}
return result.join('')
}
var flipTable = {
a: '\u0250',
b: 'q',
c: '\u0254',
d: 'p',
e: '\u01DD',
f: '\u025F',
g: '\u0183',
h: '\u0265',
i: '\u0131',
j: '\u027E',
k: '\u029E',
//l : '\u0283',
m: '\u026F',
n: 'u',
r: '\u0279',
t: '\u0287',
v: '\u028C',
w: '\u028D',
y: '\u028E',
'.': '\u02D9',
'[': ']',
'(': ')',
'{': '}',
'?': '\u00BF',
'!': '\u00A1',
"\'": ',',
'<': '>',
'_': '\u203E',
';': '\u061B',
'\u203F': '\u2040',
'\u2045': '\u2046',
'\u2234': '\u2235',
'\r': '\n'
}
for (i in flipTable) {
flipTable[flipTable[i]] = i
}
<input type="text" id="texto" style="width:100%">
<pre id="resultado" />
Buenas amigo espero esto te ayude
En cada vuelta del bucle y con el método .charAt()
iremos componiendo la cadena invertida. Es decir, en la primera iteracción obtenemos el último carácter de la cadena y lo ponemos al principio de la cadena invertida, en la segunda iteracción obtenemos el penúltimo carácter y o ponemos como segundo carácter de la cadena invertida. Así hasta que hayamos recorrido la cadena por completo.
fuente: Linea de codigo
$("#cambiarTexto").click(function(){
var valor = $("#texto").val()
$("#p").html(invertir(valor))
})
function invertir(cadena) {
var x = cadena.length;
var cadenaInvertida = "";
while (x>=0) {
cadenaInvertida = cadenaInvertida + cadena.charAt(x);
x--;
}
return cadenaInvertida;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="texto" type="text" name="" value="">
<button id="cambiarTexto" type="button" name="button">Mostrar texto al revés</button>
<br>
<p id="p"></p>
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("reverse").addEventListener
("keyup", e => {
var c = reverse(e.target.value);
function b(){
document.getElementById("result").innerHTML = arguments[0];
};
b(c);
});
});
function reverse(s){
return s.split("").reverse().join("");
}
<input type="text" id="reverse">
<i id="result"></i>