Javascript 当我输入div时，它会尝试提交表单

我有一些JavaScript/jQuery。当我在div中键入时，它会在引导面板下方的预览区域中显示我正在键入的代码

但是，因为我有表单标签包装在它周围，然后出于某种原因开始输入，它会触发表单提交，而我不需要提交

我只希望能够提交表单时，点击提交按钮

当我开始在可编辑的div区域输入时，如何阻止表单提交？并且只在点击提交按钮时提交表单

代码视图预览：

HTML

<form action="index.php" method="post" class="form-horizontal">
<div class="container">

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">

<div class="form-group">
    <label for="forum-title" class="col-sm-2">Title</label>
        <div class="col-sm-10">
        <input type="text" class="form-control" name="title" id="forum-title" placeholder="Title" />
    </div>
</div>

</div>
</div>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="clearfix">
            <div class="pull-left">
                <button id="bold" class="btn btn-default" data-toggle="tooltip" data-placement="top" href="#" title="Bold <b>"><i class="fa fa-bold"></i></button>
                <button id="italic" class="btn btn-default" data-toggle="tooltip" data-placement="top" href="#" title="Ilatic <i>"><i class="fa fa-italic"></i></button>
                <button id="pre" class="btn btn-default" data-toggle="tooltip" data-placement="top" href="#" title="Code Sample <pre>">{}</button>
                <button id="hr" class="btn btn-default" data-placement="top" href="#" title="Still Working On Script" disabled="disabled">hr</button>
                <button id="hyperlink" class="btn btn-default" data-placement="top" href="#" title="Still Working On Script" disabled="disabled"><i class="fa fa-link icon-link"></i></button>
                <button id="strikethrough" class="btn btn-default" data-placement="top" href="#" title="Still Working On Script" disabled="disabled"><i class="fa fa-strikethrough icon-strikethrough"></i></button>
                <button id="code_view" class="btn btn-default" data-toggle="tooltip" data-placement="top" href="#" title="Code View"><i class="fa fa-code icon-code"></i></button>
                <button id="revert" class="btn btn-default" data-placement="top" href="#" title="Still Working On Script" disabled="disabled" disabled="disabled">Revert</button>
            </div>
            <div class="pull-right">
            </div>
        </div> 
    </div>
    <div class="panel-body">
        <div class="form-group">
            <div id="editable"></div>
        </div>
    </div><!-- .panel-body -->
    <div class="panel-footer">
        <div class="clearfix">
        <div class="pull-left">
        </div>
        <div class="pull-right">
            <button type="submit" class="btn btn-primary">Post Your Question</button>
        </div>
        </div>
    </div>
</div><!-- .panel -->
</div>
</div>

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
        <div id="preview"></div>
    </div>  
</div>

</div><!-- .container -->
</form>

标题
{}
人力资源
还原
张贴你的问题

脚本

$（函数（）{
$（“#粗体”）.tooltip（）；
$（“#斜体”）.tooltip（）；
$（“#hr”）.tooltip（）；
$（“#超链接”）.tooltip（）；
$（“#删除线”）.tooltip（）；
$（“#pre”）.tooltip（）；
$（“#代码_视图”）。工具提示（）；
$（“#还原”）.tooltip（）；
});
$（'code_view'）。在（'click'，function（）上{
变量代码=$（“#可编辑”）.text（）；
$（'#preview'）.html（代码）；
});
$（“#可编辑”）.keyup（函数（）{
$（'code_view'）。触发器（'click'）；
});
$（'#可编辑'）。每个（函数（）{
this.contentEditable=true；
});
$（文档）.ready（函数（）{
$（“按钮[id='bold']）。在（'click'，function（）上）{
变量文本、sel、范围；
if（window.getSelection）{
text=window.getSelection（）.toString（）；
sel=window.getSelection（）；
如果（选择范围计数）{
范围=选择范围（0）；
range.deleteContents（）；
insertNode（range.createContextalFragment（“”+text+“”））；
}
}else if（document.selection&&document.selection.createRange）{
text=document.selection.createRange（）.text；
range=document.selection.createRange（）；
range.innerHTML=''+文本+''；
}   
$（'code_view'）。触发器（'click'）；
});
$（“按钮[id='italic']）。在（'click'，function（）{
变量文本、sel、范围；
if（window.getSelection）{
text=window.getSelection（）.toString（）；
sel=window.getSelection（）；
如果（选择范围计数）{
范围=选择范围（0）；
range.deleteContents（）；
insertNode（range.createContextalFragment（“”+text+“”））；
}
}else if（document.selection&&document.selection.createRange）{
text=document.selection.createRange（）.text；
range=document.selection.createRange（）；
range.innerHTML=''+文本+''；
}   
$（'code_view'）。触发器（'click'）；
});
$（“按钮[id='hr']）。在（'单击'，函数（）上）{
$（'code_view'）。触发器（'click'）；
});
$（“按钮[id='pre']）。在（'click'，function（）{
变量文本、sel、范围；
if（window.getSelection）{
text=window.getSelection（）.toString（）；
sel=window.getSelection（）；
如果（选择范围计数）{
范围=选择范围（0）；
range.deleteContents（）；
insertNode（range.createContextalFragment（“”+text+“”））；
$（“pre”）。在（“

”）之前；
$（“pre”）。在（“

”）之后；
}
}else if（document.selection&&document.selection.createRange）{
text=document.selection.createRange（）.text；
range=document.selection.createRange（）；
range.innerHTML=''+文本+''；
$（“pre”）。在（“

”）之前；
$（“pre”）。在（“

”）之后；
}   
$（'code_view'）。触发器（'click'）；
});
$（“按钮[id='revert']）。在（'click'，function（）{
变量文本、sel、范围；
if（window.getSelection）{
text=window.getSelection（）.toString（）；
sel=window.getSelection（）；
如果（选择范围计数）{
范围=选择范围（0）；
range.deleteContents（）；
insertNode（range.createContextualFragment（text））；
}
}else if（document.selection&&document.selection.createRange）{
text=document.selection.createRange（）.text；
range=document.selection.createRange（）；
range.innerHTML=文本；
}
$（'code_view'）。触发器（'click'）；
});
});

您需要指定按钮的

类型

属性

按钮|提交|重置

。在代码中，对于不用于提交表单的按钮，需要使用

type=“button”

---

不同的浏览器可能会对

元素使用不同的默认类型。

您可以使用on-keyup来触发单击lolYes，这样它就可以在预览区域中将代码显示为键入。

$(function(){
   $("#bold").tooltip();
   $("#italic").tooltip();
   $("#hr").tooltip();
   $("#hyperlink").tooltip();
   $("#strikethrough").tooltip();
   $("#pre").tooltip();
   $("#code_view").tooltip();
   $("#revert").tooltip();
});

$('#code_view').on('click', function() {
    var code = $('#editable').text();
    $('#preview').html(code);
});

$('#editable').keyup(function(){
    $('#code_view').trigger('click');
});

$('#editable').each(function(){
    this.contentEditable = true;
});

$(document).ready(function() {
    $("button[id='bold']").on('click', function() {
        var text, sel, range;

        if (window.getSelection) {

            text = window.getSelection().toString();
            sel = window.getSelection();

            if (sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                range.insertNode(range.createContextualFragment('<b>'+text+'</b>'));
            }

        } else if (document.selection && document.selection.createRange) {

            text = document.selection.createRange().text;
            range = document.selection.createRange();
            range.innerHTML = '<b>'+text+'</b>';
        }   
    $('#code_view').trigger('click');
    });


    $("button[id='italic']").on('click', function() {      
        var text, sel, range;

        if (window.getSelection) {

            text = window.getSelection().toString();
            sel = window.getSelection();

            if (sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                range.insertNode(range.createContextualFragment('<i>'+text+'</i>'));
            }

        } else if (document.selection && document.selection.createRange) {

            text = document.selection.createRange().text;
            range = document.selection.createRange();
            range.innerHTML = '<i>'+text+'</i>';
        }   

        $('#code_view').trigger('click');

    });

    $("button[id='hr']").on('click', function() {
        $('#code_view').trigger('click');
    });


    $("button[id='pre']").on('click', function() {           
        var text, sel, range;

        if (window.getSelection) {

            text = window.getSelection().toString();
            sel = window.getSelection();

            if (sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                range.insertNode(range.createContextualFragment('<pre>'+text+'</pre>'));
                $("pre").before("<br /><br />");
                $("pre").after("<br /><br />");
            }

        } else if (document.selection && document.selection.createRange) {

            text = document.selection.createRange().text;
            range = document.selection.createRange();
            range.innerHTML = '<pre>'+text+'</pre>';

            $("pre").before("<br /><br />");
            $("pre").after("<br /><br />");

        }   

        $('#code_view').trigger('click');

    });


    $("button[id='revert']").on('click', function() {           
        var text, sel, range;

        if (window.getSelection) {

            text = window.getSelection().toString();
            sel = window.getSelection();

            if (sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                range.insertNode(range.createContextualFragment(text));
            }

        } else if (document.selection && document.selection.createRange) {

            text = document.selection.createRange().text;
            range = document.selection.createRange();
            range.innerHTML = text;
        }

        $('#code_view').trigger('click');
    });

});