Блог

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

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

#jquery #css

#jquery #css

Вопрос:

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

Вот мой код:

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

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

Комментарии:

1. я не думаю, что вы можете стилизовать вводимый текст как подчеркивание, если это так, вы могли бы заменить ввод текста элементом, таким как div

2. На самом деле я пытался использовать этот способ script-tutorials.com/text-animation-jquery-ui-slider и мне нужно то же самое, чтобы использовать его для оформления текста.

Ответ №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 /

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

Комментарии:

1. Большое вам спасибо за то, что разобрались со мной в этой проблеме.

Ответ №2:

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

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

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

2.Загрузите 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. Модифицированный 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: http://jsfiddle.net/deepumohanp/t2wKP /

Ответ №3:

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

 <div contenteditable></div>

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

Комментарии:

1. На самом деле я пытался использовать этот способ script-tutorials.com/text-animation-jquery-ui-slider и мне нужно то же самое, чтобы использовать его для оформления текста.

Метки: