How to add a space when the user press 'Enter' key twice in purchase terms section

[Kavya]

Hi Everyone,

I wanted to check if the user press 'Enter' key twice and add an empty line/space between the text in Purchase terms section while creating quote (Custom quote).

Have tried with different function like :

document.getElementById("someId").addEventListener("keydown", function(event){
    //do something on keydown
    if(event.keyCode==13){
     //enter key was pressed
    }
    if (event.keyCode >= 65 && event.keyCode <= 90){
       //input was a-z
    }
});

var enterPressed = 0;
window.onkeypress = function (e) {
  var keyCode = (e.keyCode || e.which);
  if (keyCode === 13) {
    alert('key');
    if (enterPressed === 0) {
      enterPressed++;
      document.getElementById("result").innerHTML = "Enter pressed once. enterPressed is " + enterPressed;
    } else if (enterPressed === 1) {
      e.preventDefault(); 
      document.getElementById("result").innerHTML = "Enter pressed twice. enterPressed is " + enterPressed;
    }
    return;
   }
 };

 But couldn't get any results and getting errors for the reference of event.

The user will enter the input inside a Div tag so can anyone tell me how to trigger function onkeypress /onkeydown /onkeyup to check the enter key press and need to add a space between the text.

Thanks 

Screenshot (left side you can see the space but in the right side in preview can't able to see the space)

[Kavya · Accepted solution]

Thanks for the answer's but what worked for me is changing the display:inline-block style tag

[ChrisBroeders]

Hi @Kavya ,

So for me its the same as for Amanda, it does it automatically. However, the way it does it is by using margin in the CSS. If you had a 15px margin to the top and bottom of your <p> it should give you the results you are looking for (see image for referrence.)

Hope that helps,

Chris

www.prosperohub.com

[amandaulm]

Thanks @dennisedson !

I'm pretty stumped, only because my template seems like it does this by default. I do have one custom class applied to this div, but the only style applied to it is to remove the bottom margin from the h5 element. I'm attaching a screenshot of what happens if I double-enter in that box.

@Kavya what does your HTML look like? Could something be stripping out empty p elements?

[dennisedson]

Hey @Kavya 

Going to add a couple people who are also messing with the custom quotes to this conversation and maybe drum up some ideas 😸

@amandaulm , @ChrisBroeders , @rwolupo  any ideas?

(ps you all have officially become my resident experts in this subject 😉)

[rwolupo]

thx @dennisedson  ... but i am to late 😛