Estoy tratando de obtener texto específico audaz, dentro de un campo de texto de entrada. No estoy seguro de cómo hacerlo ya que el código html no se interpreta dentro de un campo de texto, por lo que nada como <b> no funcionará. ¿Es posible audaz solo un texto? Los métodos como negrita() solo agregan <b> alrededor de la cadena.¿Cómo se hace algo de texto, dentro de un campo de texto de entrada, en negrita?
Gracias
Aquí hay un truco.
Un campo ENTRADA está sobre un SPAN. Con un ejemplo de función que pone los 3 primeros caracteres en negrita. Puede tener problemas de transparencia con el navegador anterior. En ese caso, puede salir del campo de entrada normal sin el efecto en negrita.
<!DOCTYPE html>
<html lang="en">
<head>
<title>transp</title>
<style>
div{
position:relative;
}
input, span{
top:0;
position:absolute;
width:120px;
}
span{
top:2px;
left:2px;
z-index:1;
overflow:hidden;
}
input{
background:transparent;
z-index:2;
}
</style>
</head>
<body>
<div>
<input onkeyup="bold3(this)" />
<span id="back"></span>
</div>
<script>
function bold3(inp){
inp.style.color = 'transparent';
var span = document.getElementById('back');
span.innerHTML =
'<b>' +
inp.value.substr(0, 3) +
'</b>' +
inp.value.substr(3);
}
</script>
</body>
</html>
Voy a dar una oportunidad a esta respuesta, la probé fuera de la página en la que estoy trabajando, y parece funcionar bastante bien. Gracias – clinchergt
Tenga en cuenta que comienza una ruta inusual, y puede correr con algunas sorpresas en el camino. Otro enfoque sería tener un campo de entrada donde escriba y debajo del resultado formateado. Como cuando respondes preguntas aquí. – Mic
Prueba esto:
<input type="text" style="font-weight: bold;" value="Some Value" />
Pero de esta manera se mostrarán en negrita todo el texto dentro del elemento. Creo que no hay manera fácil de peinar sólo una parte del texto
OP quiere ** partes ** de la entrada en negrita. –
Quizás una posible solución sería que el uso de un div editable, así:
<div contentEditable="true">
Lorem <b>ipsum</b> dolor
</div>
Si usted está tratando de presentar este valor en una forma, tendrás que usar JavaScript para obtener el innerHTML de este div y asignarlo a una entrada oculta o algo así.
Esta podría ser la solución más simple. Definitivamente usaré esto si no puedo hacer que la solución de Mic funcione en la página real. De hecho, traté de obtener el innerHTML para que el formulario pudiera obtenerlo, pero no tuve éxito, simplemente ignora el código html. ¿Podría ser porque utilicé GET y no POST? – clinchergt
@clinchergt: Tendría que ver un código de muestra que usaste para ayudar con eso. – Travesty3
Depende de qué navegadores desee apoyar. Si solo desea admitir navegadores HTML5, simplemente coloque un div con el conjunto de banderas contenteditable y ajústelo con css para que parezca una entrada.
<div contenteditable>Text <b>bold</b></div>
Si la negrita es en una zona muy controlada, con excepción quizá de hacer algo como:
<div>
<input type="text" style="font-weight: bold;" value="Bold text" />
<input type="text" value="This is not" />
</div>
El uso de CSS para diseñarlo y JS para manejar la sobrecarga. Sin embargo, esto podría ponerse feo rápidamente.
necesitamos algo así como la vista androide, que permite el formato HTML personalizada, vincular el reconocimiento, etc, de forma nativa ... ése es el problema.
La manera más verdadera de tener tal cosa es construir su propio elemento personalizado .
puede crear su propio elemento <my-input></my-input> y personalizar su propia entrada.
No en un campo de entrada simple. Busque [editable divs] (http://blog.whatwg.org/the-road-to-html-5-contenteditable) en su lugar o simplemente no lo haga. –
No, a menos que crees un elemento que superpone la entrada perfectamente, y eso es una pesadilla total. La forma en que las RTE hacen es usar un iframe con el contenido para que puedan manipularlo. – MetalFrog
pregunta duplicada como aquí [http://stackoverflow.com/questions/5408292/just-trying-to-give-a-bold-font-to-an-input-text](http://stackoverflow.com/questions/5408292/just-trying-a-give-a-bold-font-to-a-input-text) –