Question

我现在有三个复选框和一个文本框如果我在文本框中写一些东西并检查粗体复选框，文本应该以粗体效果显示，并且类似斜体和下划线而不回发（即它应该立即反映所选效果）。

这是我的代码：

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

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

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

希望它有所帮助！

Answer 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链接：http://jsfiddle.net/deepumohanp/t2wKP/

Answer 3

输入内的文本不能以这种方式格式化。您可以尝试使用editable div假冒它。

<div contenteditable></div>

并使用jQuery。

如何使用jquery使文本变为粗体，斜体和下划线

3 个答案: