Textarea can't use Enter key to wrap

Textarea can't use Enter key to wrap

m2163926m2163926 Posts: 5Questions: 1Answers: 0

Why textarea can't use Enter key to wrap

This question has accepted answers - jump to:

Answers

  • bindridbindrid Posts: 728Questions: 0Answers: 118

    You are going to have to give us more information because hitting the enter key in a textarea will give you a hard line break.

    How does this relate to DataTables?

  • m2163926m2163926 Posts: 5Questions: 1Answers: 0

    I know textarea in browser can give a hard line break.
    But I use DataTables fields textarea it don't give me hard line break.
    I disable js it can give me a hard line break so I don't know why.

  • m2163926m2163926 Posts: 5Questions: 1Answers: 0

    This html is my test sample.
    https://jsbin.com/rijozizoqi/edit?html,output

  • allanallan Posts: 47,478Questions: 1Answers: 6,746 Site admin
    Answer ✓

    Thanks - you are correct! The error is in the following block of code in Editor:

        // Prevent submit by a host `<form>`
        $(document).on( 'keydown'+namespace, function ( e ) {
            if ( e.keyCode === 13 && that.s.displayed ) { // return
                e.preventDefault();
            }
        } );
    

    A short term fix would be:

        // Prevent submit by a host `<form>`
        $(document).on( 'keydown'+namespace, function ( e ) {
            if ( e.keyCode === 13 && that.s.displayed && document.activeElement && document.activeElement.nodeName.toLowerCase() !== 'textarea' ) { // return
                e.preventDefault();
            }
        } );
    

    I think there is probably a better way, so I'm going to look into it further. But that's a workaround.

    Allan

  • allanallan Posts: 47,478Questions: 1Answers: 6,746 Site admin
    Answer ✓

    Yup - here is a better way - it uses the canReturnSubmit plug-in method from the fields which will check what return should do:

        $(document).on( 'keydown'+namespace, function ( e ) {
            if ( e.keyCode === 13 && that.s.displayed ) { // return
                var el = $(document.activeElement);
    
                if ( el ) {
                    var field = that._fieldFromNode( el );
    
                    if ( field.canReturnSubmit( el ) ) {
                        e.preventDefault();
                    }
                }
            }
        } );
    

    To be in the next version of Editor!

    Allan

  • m2163926m2163926 Posts: 5Questions: 1Answers: 0

    Sorry what is the namespace?
    Is .dt?

    And what is the that?
    Is that = editor?

  • m2163926m2163926 Posts: 5Questions: 1Answers: 0

    Is my code wrong?

      $(document).ready(function() {
          editor = new $.fn.dataTable.Editor( {
              ajax: "/api",
              table: "#user",
              fields: [ {
                  type:  "textarea",
                  label: "welcome",
                  name: "welcome"
              }]
          } );
    
          table = $('#user').DataTable( {
              dom: "Bfrtip",
              ajax: "/api",
              columns: [
                  { data: "name"},
              ],
              select: true,
              buttons: [
                  { extend: "create", editor: editor },
                  { extend: "edit",   editor: editor },
              ]
          } );
      } );
    
      $(document).on( 'keydown'+'.dt', function ( e ) {
          if ( e.keyCode === 13 && editor.s.displayed ) { // return
              var el = $(document.activeElement);
    
              if ( el ) {
                  var field = editor._fieldFromNode( el );
    
                  if ( field.canReturnSubmit( el ) ) {
                      e.preventDefault();
                  }
              }
          }
      } );
    
  • allanallan Posts: 47,478Questions: 1Answers: 6,746 Site admin

    Ah yes - that code I posted above needs to go into Editor itself. As I mentioned:

    The error is in the following block of code in Editor:

    That is the block that the above would replace.

    Regards,
    Allan

Sign In or Register to comment.