Question

我有一些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>

脚本

$(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');
    });

});

Answer 1

您需要指定按钮type的{{1}}属性。在您的代码中，您需要使用button|submit|reset作为不用于提交表单的按钮。

不同的浏览器可能会为type="button"元素使用不同的默认类型。

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

1 个答案: