如何使用 jquery/javascript 在 textarea 的 summernote 编辑器的第一个位置限制 space

Question

这里我使用的是summernote编辑器，因为我需要在第一个位置限制space。

<link href="~/css/bootstrap.min.css" rel="stylesheet" />  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">

    <div class="QB-PanelName"><lable>Question</lable></div>
     <textarea name="QBQuestion" id="QBQuestion" rows="10" cols="80"></textarea>        
   </div>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>



$('#QBQuestion').summernote({
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['picture'],
                    ['table']
                ]
            });

此处按键无法将 space 限制在第一个位置

$("#QBQuestion").keypress(function (evt) {
                var kc = evt.data.keyCode;
                var qbQuestion = $('#QBQuestion').summernote('code');
                if (kc === 32 && qbQuestion.length === 0) {
                        event.preventDefault();
                   }
            });

Answer 1

您需要在脚本中针对按键事件进行以下更改。

将选择器 "#QBQuestion" 更改为 "div.note-editing-area div.note-editable"。
将 var kc = evt.data.keyCode; 更改为 var kc = evt.keyCode;。
将您的条件更改为 (kc === 32 && (qbQuestion.length == 0 || qbQuestion == '<p><br></p>'))。

所以你的整个代码应该如下所示：

$('#QBQuestion').summernote({
                    toolbar: [
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['strikethrough', 'superscript', 'subscript']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['picture'],
                        ['table']
                    ]
                });

$("div.note-editing-area div.note-editable").keypress(function (evt) {
       var kc = evt.keyCode;
       var qbQuestion = $('#QBQuestion').summernote('code');
       if (kc === 32 && (qbQuestion.length == 0 || qbQuestion == '<p><br></p>')) {
          event.preventDefault();
       }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <div class="QB-PanelName"><label>Question</label>
         <textarea name="QBQuestion" id="QBQuestion" rows="10" cols="80"></textarea>        
       </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>

所有更改的原因是：

当您使用 summernote 编辑器时，它所做的是创建一个可编辑的 div 来处理前面的所有编辑器任务，因此您尝试附加按键事件的元素不再参与编辑。
你可以直接使用eventObj.keyCode.
与可编辑 div 一样，编辑器添加了一个换行符，因此我添加了检查空行的条件。

希望对您有所帮助，解决了您的问题。

如何使用 jquery/javascript 在 textarea 的 summernote 编辑器的第一个位置限制 space

how to restrict space at first position in summernote editor for textarea using jquery/javascript

javascript

jquery

summernote