Cómo hacer texto en negrita, cursiva y subrayado usando jquery

Question

Tengo tres casillas de verificación y un cuadro de texto ahora Si escribo algo en el cuadro de texto y marque la casilla de verificación en negrita, el texto debe aparecer con negrita y subrayado similar sin subrayado (es decir, debería reflejarse inmediatamente con el efecto seleccionado).

Aquí está mi código:

Bold:<input type="checkbox" value=""/> 
Italic:<input type="checkbox" value=""/> 
Underline:<input type="checkbox" value=""/> 

<input type="text" value=""> 

Answer 1

Usted puede hacer lo siguiente:

<form> 
    Bold:<input name="textStyle" type="checkbox" value="bold"/> 
    Italic:<input name="textStyle" type="checkbox" value="italic"/> 
    Underline:<input name="textStyle" type="checkbox" value="underline"/> 

    <input name="styledText" type="text" value=""> 
</form> 

<script type="text/javascript"> 
    $('input[name="textStyle"]').change(function(){ 
     if ($(this).val() == 'bold'){ 
      if ($(this).is(':checked')) $('input[name="styledText"]').css('font-weight', 'bold'); 
      else $('input[name="styledText"]').css('font-weight', 'normal'); 
     } 
     else if ($(this).val() == 'italic'){ 
      if ($(this).is(':checked')) $('input[name="styledText"]').css('font-style', 'italic'); 
      else $('input[name="styledText"]').css('font-style', 'normal'); 
     } 
     else if ($(this).val() == 'underline'){ 
      if ($(this).is(':checked')) $('input[name="styledText"]').css('text-decoration', 'underline'); 
      else $('input[name="styledText"]').css('text-decoration', 'none'); 
     } 
    }); 
</script> 

violín aquí: http://jsfiddle.net/tyfsf/

espero que ayude!

Answer 2

Texto dentro de una entrada no puede ser formateado de esta manera. Puedes intentar y simularlo con un div editable.

<div contenteditable></div> 

Y use jQuery en eso.

Answer 3

Puede hacerlo con CSS simple y un pequeño código jQuery.

1.En primer lugar definir sus clases de hojas de estilo en cascada

<style type="text/css"> 
.bold { 
font-weight:bold; 
} 
.italic { 
font-style:italic; 
} 
.underline { 
    text-decoration: underline; 
} 
</style> 

2.Cargue jQuery

<script type="text/javascript" src="jquery.js"></script> 

3. Escriba la función para la conmutación de las clases

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.selector').click(function() { 
     var checked = $(this).is(':checked'); 
     var value = $(this).attr('value'); 
     if(checked) { 
      $('#box').addClass(value); 
     } else { 
      $('#box').removeClass(value); 
     } 
    });  

}); 
</script> 

5.Modified html

Bold:<input class='selector' type="checkbox" value="bold"/> 
Italic:<input class='selector' type="checkbox" value="italic"/> 
Underline:<input class='selector' type="checkbox" value="underline"/> 
<br> 
<input id="box" type="text" value=""> 
<br> 

enlace jsFiddle: http://jsfiddle.net/deepumohanp/t2wKP/