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

SOLVE
Kavya
Member

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)Screenshot (left side you can see the space but in the right side in preview can't able to see the space)

0 Upvotes
1 Accepted solution

Accepted Solutions
Kavya
Solution
Member

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

View solution in original post

5 Replies 5
dennisedson
Community Manager

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 😉)

 

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
rwolupo
Top Contributor

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

amandaulm
Contributor

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?

 

QuoteSpacing.png

ChrisBroeders
Contributor

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.)

 

ChrisBroeders_0-1611222359795.png


Hope that helps,

Chris

www.prosperohub.com

PROSPEROHUB_LOGO_PRIMARY.png

Kavya
Solution
Member

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

View solution in original post