Как сделать текст полужирным, курсивом и подчеркиванием с помощью jquery

У меня есть три флажка и текстовое поле. Если я пишу что-то в текстовом поле и проверяю выделенный полужирный флажок, текст должен появляться с жирным эффектом и аналогичным курсивом и подчеркивать без обратной передачи (т.е. он должен сразу отражать выбранный эффект).

Вот мой код:

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

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

Ответ 1

Вы можете сделать следующее:

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

Заклинание здесь: http://jsfiddle.net/tyfsf/

Надеюсь, что это поможет!

Ответ 2

Вы можете сделать это с помощью простого CSS и небольшого кода jQuery.

1. Сначала определите классы каскадных таблиц стилей

<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. Запишите функцию для переключения классов

<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

Текст внутри ввода не может быть отформатирован таким образом. Вы можете попробовать и подделать его с помощью editable div.

<div contenteditable></div>

И используйте jQuery для этого.