jQuery Mobile es un sistema de interfaz de usuario basado en HTML-5 que se utiliza para diseñar sitios web receptivos y accesibles para dispositivos móviles, pestañas y computadoras de escritorio. Está basado en jQuery .
En este artículo, utilizaremos la opción jQuery Mobile Textinput clearBtnText para configurar el texto que veremos cuando pasemos el cursor sobre el botón borrar de un Textinput Widget. Para que esto funcione, la opción Textinput clearBtn debe establecerse en true . La opción clearBtnText acepta una string .
Sintaxis:
Inicialice Textinput con la opción clearBtnText:
$( ".selector" ).textinput({
clearBtnText: "Your Text Here"
});
-
Obtenga la opción clearBtnText después de la inicialización:
var clearBtnText = $( ".selector" ) .textinput( "option", "clearBtnText" ); -
Establezca la opción clearBtnText después de la inicialización:
$( ".selector" ).textinput( "option", "clearBtnText", "Your Text Here" );
Enlaces CDN:
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”> </script>
Ejemplo: en el siguiente ejemplo, estableceremos la opción clearBtn en verdadero y la opción clearBtnText en » Borrar el nombre «.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Popup - reposition method</title>
<link rel="stylesheet"
href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
</script>
<script>
$(document).ready(function () {
$( "#GFG" ).textinput({
clearBtn: true,
clearBtnText: "Clear The Name"
});
});
</script>
<style>
.ui-input-text{
width: 400px;
}
</style>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>jQuery Mobile TextInput clearBtnText option</h3>
<br>
<input
id="GFG"
type="text"
name="name"
autocomplete="off"
placeholder="Enter Your Name Here."
/>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/textinput/#option-clearBtnText