Comment faire du texte gras, italique et souligné en utilisant jquery

Question

J'ai trois cases à cocher et une zone de texte maintenant Si j'écris quelque chose dans la zone de texte et cochez la case en gras, le texte devrait apparaître en gras et italique et souligner sans postback (ie devrait refléter immédiatement avec l'effet sélectionné).

Voici mon code:

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

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

Answer 1

Vous pouvez effectuer les opérations suivantes:

<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> 

Fiddle ici: http://jsfiddle.net/tyfsf/

Hope it helps!

Answer 2

texte à l'intérieur d'une entrée ne peut pas être formaté de cette façon. Vous pouvez essayer et feindre avec un editable div.

<div contenteditable></div> 

Et d'utiliser jQuery sur cela.

Answer 3

Vous pouvez le faire en utilisant CSS simple et un peu de code jQuery.

1.Premièrement définir vos classes de feuille de style en cascade

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

2.Chargez jQuery

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

3.Write la fonction de commutation des classes

<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> 

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