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

Question

Here i am using summernote editor for that i need to restrict space at frist position.

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

Here keypress is not working to restrict space in first position

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

Answer 1

You need to make following changes in your script for keypress event.

1. Change the selector "#QBQuestion" to "div.note-editing-area div.note-editable".
2. Change var kc = evt.data.keyCode; to var kc = evt.keyCode;.
3. Change your condition to (kc === 32 && (qbQuestion.length == 0 || qbQuestion == '<p><br></p>')).

So your whole code should look like below:

$('#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>

Reasons for all the changes are:

1. As you are using summernote editor, what it does is it creates a editable div which handles all the editor tasks ahead so the element you were trying to attach a keypress event was no longer participating in editing.
2. To get the keyCode of any pressed key you can directly use eventObj.keyCode.
3. As in editable div a line break is added by editors so I added the condition to check for empty line.

Hope it helps and solved your issue.