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

回答1:

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!

回答2:

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/

回答3:

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.

来源：https://stackoverflow.com/questions/7946196/how-to-make-text-bold-italic-and-underline-using-jquery

标签

jquery

css