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: 730Questions: 0Answers: 119

    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: 61,438Questions: 1Answers: 10,052 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: 61,438Questions: 1Answers: 10,052 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: 61,438Questions: 1Answers: 10,052 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

  • wharekurawharekura Posts: 3Questions: 0Answers: 0
    edited August 2018

    Multi-line textarea data has caused xss validation warning when trying to delete a row. I could "turn off" microsoft's xss validation via web.config but that is overkill.

    If anyone else is experiencing the above pain (most likely just my setup) this may help:

            editor.on('preSubmit', function (e, data, action) {
                if (action === 'remove') {
                    // clear textarea text as it causes xss validation error on deletion        
                    $.each(data.data, function (key, values) {
                        data.data[key]['YourNamespace']['YourField'] = null;
                    });
                }
            });
    
  • laurentP13laurentP13 Posts: 4Questions: 0Answers: 0
    edited September 2018

    Hi Allan,
    thanks for the answer, though I can't locate where to apply the fix as the dataTables.editor file is minified.
    Can you pls help ?
    thanks,
    Laurent

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    You'd need the licensed version to apply the fix as the demo is obfuscated.

    Allan

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    I should say that we are working on 1.8 at the moment which will contain the fix.

    Allan

  • laurentP13laurentP13 Posts: 4Questions: 0Answers: 0

    Understood. Buying Editor was definitely in my todo anyhow :) Such a great package!
    Laurent

  • wharekurawharekura Posts: 3Questions: 0Answers: 0

    multi line entry into textboxes with enter key is now working without using a workaround in 1.8. However still need workaround for System.Web.HttpRequestValidationException: 'A potentially dangerous Request.Form value was detected from the client.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Use UnvalidatedRequestValues rather than Request.Form. See the MSDN documentation here.

    Allan

  • wharekurawharekura Posts: 3Questions: 0Answers: 0

    Thank you Allan. That is one way (also heaps easy) and so is the web.config change.

    My 'preSubmit' code snippet above worked for one page but not for another, so I did the following hack. However will now look into unvalidatedrequestvalues and "promise"

            $('#organisation').on('click', 'a.editor_remove', function (e) {
                e.preventDefault();
    
                if (confirm('Are you sure you want to remove this record?')) {
    
                    // get row id
                    //------------------------------------------------------
                    rowKeyToDelete = $(this).closest('tr');
    
                    //------------------------------------------------------------------
                    // clear textarea text as it causes xss validation error on deletion
                    //------------------------------------------------------------------
                    editor.edit(rowKeyToDelete, false)
                        .set('Organisation.Description', 'x')
                        .set('Organisation.Address', 'x')
                        .submit();
                }              
            });
    
            editor.on("submitSuccess", function (e, jason, data, action) {
    
                //------------------------------------------------------------------
                // Remove after a wait as doing an edit submit then a delete
                // submit straight after, didnt work
                //------------------------------------------------------------------
                if (rowKeyToDelete !== null) {
                    setTimeout(function () {
                        editor.remove(rowKeyToDelete, false).submit();
                        rowKeyToDelete = null;
                    }, 1000);
                }
            });
    
This discussion has been closed.