CODEWITHSUNDEEP
jquerycss
coder
coder

Reputation: 13248

How to make text bold,italic and underline using jquery

I have three checkboxes and a textbox now If I write something in textbox and check the bold checkbox the text should appear with bold effect and similarly italic and underline without postback(i.e it should reflect immediately with the selected effect).

Here is my code:

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

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

Upvotes: 14

Views: 89058

Answers (3)

WarFox
WarFox

Reputation: 4983

You can do that using simple CSS and a little jQuery code.

1.First define your cascading style sheet classes

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

2.Load jQuery 

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

3.Write the function for switching the 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>

jsfiddle link: http://jsfiddle.net/deepumohanp/t2wKP/

Upvotes: 8

dSquared
dSquared

Reputation: 9835

You can do the following:

<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 here: http://jsfiddle.net/tyfsf/

Hope it helps!

Upvotes: 42

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

Text inside of an input cannot be formatted this way. You can try and fake it with an editable div.

<div contenteditable></div>

And use jQuery on that.

Upvotes: 0

Related Questions