preventing Textarea input after pixel width is reached

up vote
1
down vote

favorite

I am building a Tool where you can preview how Google will display your result.
When the user inputs more than 920 pixels of characters the result should cut it off and add on "...".

I can't do this using max-length because every letter and font comes with differents widths.
In javascript I am making the output equal to the input, then I created a second output which has no line break. If I would use the first output the innerWidth wouldn't return the pixel width of the string but of the whole block. The second output is invisable as its just for measuring purposes.

I tried using the preventDefault method when the innerWidth is = or > than 920px. But it hasn't been working for me.
Using a text-overflow property on the output div can't be used here because I wan't the containers width to be dynamic and not a width of 460px * 2 rows or 306px * 3 rows etc...

what would be the corrent if-function to use here and how do I prevent further input?

Thank you for your help.

Side note: Ignore the poorly writte CSS I've quickly copied it from my document which I can't show.

 function snippet()

{

  //copies input to output

var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  //copies input to counting space

  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  //pixel countdown

  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  //character countdown

  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  //stop input by pixel ??

  

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="inputs">

    <div class="input-wrap" id="meta-div">

        <h3>Description</h3>

        <div class="countdown" id="metaCount">0 Char</div>

        <div class="countdown" id="metaCountPixel">0px / 920px</div>

        <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

    </div>

</div>



    <div id="preview">

        <h3>Snippet Preview</h3>

        <div class="outputs">

            <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

            <span class="countspace" id="metaOutPix"></span>

        </div>

    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

asked Nov 19 at 12:11

jobe

133

add a comment |

up vote
1
down vote

favorite

I am building a Tool where you can preview how Google will display your result.
When the user inputs more than 920 pixels of characters the result should cut it off and add on "...".

what would be the corrent if-function to use here and how do I prevent further input?

Thank you for your help.

Side note: Ignore the poorly writte CSS I've quickly copied it from my document which I can't show.

 function snippet()

{

  //copies input to output

var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  //copies input to counting space

  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  //pixel countdown

  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  //character countdown

  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  //stop input by pixel ??

  

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="inputs">

    <div class="input-wrap" id="meta-div">

        <h3>Description</h3>

        <div class="countdown" id="metaCount">0 Char</div>

        <div class="countdown" id="metaCountPixel">0px / 920px</div>

        <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

    </div>

</div>



    <div id="preview">

        <h3>Snippet Preview</h3>

        <div class="outputs">

            <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

            <span class="countspace" id="metaOutPix"></span>

        </div>

    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

asked Nov 19 at 12:11

jobe

133

add a comment |

up vote
1
down vote

favorite

I am building a Tool where you can preview how Google will display your result.
When the user inputs more than 920 pixels of characters the result should cut it off and add on "...".

what would be the corrent if-function to use here and how do I prevent further input?

Thank you for your help.

Side note: Ignore the poorly writte CSS I've quickly copied it from my document which I can't show.

 function snippet()

{

  //copies input to output

var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  //copies input to counting space

  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  //pixel countdown

  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  //character countdown

  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  //stop input by pixel ??

  

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="inputs">

    <div class="input-wrap" id="meta-div">

        <h3>Description</h3>

        <div class="countdown" id="metaCount">0 Char</div>

        <div class="countdown" id="metaCountPixel">0px / 920px</div>

        <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

    </div>

</div>



    <div id="preview">

        <h3>Snippet Preview</h3>

        <div class="outputs">

            <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

            <span class="countspace" id="metaOutPix"></span>

        </div>

    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

asked Nov 19 at 12:11

jobe

133

I am building a Tool where you can preview how Google will display your result.
When the user inputs more than 920 pixels of characters the result should cut it off and add on "...".

what would be the corrent if-function to use here and how do I prevent further input?

Thank you for your help.

Side note: Ignore the poorly writte CSS I've quickly copied it from my document which I can't show.

 function snippet()

{

  //copies input to output

var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  //copies input to counting space

  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  //pixel countdown

  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  //character countdown

  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  //stop input by pixel ??

  

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="inputs">

    <div class="input-wrap" id="meta-div">

        <h3>Description</h3>

        <div class="countdown" id="metaCount">0 Char</div>

        <div class="countdown" id="metaCountPixel">0px / 920px</div>

        <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

    </div>

</div>



    <div id="preview">

        <h3>Snippet Preview</h3>

        <div class="outputs">

            <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

            <span class="countspace" id="metaOutPix"></span>

        </div>

    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 function snippet()

{

  //copies input to output

var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  //copies input to counting space

  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  //pixel countdown

  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  //character countdown

  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  //stop input by pixel ??

  

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="inputs">

    <div class="input-wrap" id="meta-div">

        <h3>Description</h3>

        <div class="countdown" id="metaCount">0 Char</div>

        <div class="countdown" id="metaCountPixel">0px / 920px</div>

        <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

    </div>

</div>



    <div id="preview">

        <h3>Snippet Preview</h3>

        <div class="outputs">

            <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

            <span class="countspace" id="metaOutPix"></span>

        </div>

    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 function snippet()

{

  //copies input to output

var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  //copies input to counting space

  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  //pixel countdown

  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  //character countdown

  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  //stop input by pixel ??

  

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="inputs">

    <div class="input-wrap" id="meta-div">

        <h3>Description</h3>

        <div class="countdown" id="metaCount">0 Char</div>

        <div class="countdown" id="metaCountPixel">0px / 920px</div>

        <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

    </div>

</div>



    <div id="preview">

        <h3>Snippet Preview</h3>

        <div class="outputs">

            <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

            <span class="countspace" id="metaOutPix"></span>

        </div>

    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

javascript textarea pixel preventdefault

asked Nov 19 at 12:11

jobe

133

asked Nov 19 at 12:11

jobe

133

asked Nov 19 at 12:11

jobe

133

asked Nov 19 at 12:11

jobe

133

asked Nov 19 at 12:11

jobe

133

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

You mean something like this in my snippet below?

I used add a keydown listener in the textarea when it reaches 920px or more, in this listener I set that only Backspace and Delete keys will be allowed, any other key will be ignored with the return false.

var ellipsisAdded = false

function snippet(){

  var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  if (span1.innerWidth() >= 50){

    let txtArea = $("#metaIn")

    txtArea.on("keydown", (ev) => {

        console.clear()

        if (ev.key != "Backspace" && ev.key != "Delete"){

          console.log("max Pixels reached!");

          if (!ellipsisAdded){

            ellipsisAdded = true

            let currentText = txtArea.val()

            let newTxt = currentText.substring(0, currentText.length - 1) + "..."

            txtArea.val(newTxt)

          }

          return false

        }

      })      

  }else{

    $("#metaIn").off("keydown")

    ellipsisAdded = false;

  }

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   

<div class="inputs">

<div class="input-wrap" id="meta-div">

    <h3>Description</h3>

    <div class="countdown" id="metaCount">0 Char</div>

    <div class="countdown" id="metaCountPixel">0px / 920px</div>

    <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

</div>

</div>



<div id="preview">

    <h3>Snippet Preview</h3>

    <div class="outputs">

        <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

        <span class="countspace" id="metaOutPix"></span>

    </div>

</div>

EDIT: Added the feature you talk about in comments, replacing last character by "...".
But take care that the three dots will occupy some pixels, more than a single character

edited Nov 19 at 15:16

answered Nov 19 at 12:32

Calvin Nunes

3,5832933

Thank you that's exactly what I needed.
– jobe
Nov 19 at 13:21

could you also tell me how I would replace the last three characters with "...".
– jobe
Nov 19 at 13:33

you can set the innerText of the textarea with the same text but removing the last character and adding the "...", I'll edit my answer to add this feature
– Calvin Nunes
Nov 19 at 15:08

once again thank you. I have one more things to add: this method does not work after pasting in a string that exceeds the 920px limit. you can keep typing on forever then. Would you help me fix this problem?
– jobe
2 days ago

it's important that when you are making many questions you see if it's not going out of the scope of the main question you made, if yes, then create a new question here in S.O. In this case, I think it's better to make a new one, because now you'll need another kind of listener, for when user paste something. Create a new question, you'll get more visibility to get answers that can help, I'm out of time to help now.
– Calvin Nunes
2 days ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374376%2fpreventing-textarea-input-after-pixel-width-is-reached%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

You mean something like this in my snippet below?

var ellipsisAdded = false

function snippet(){

  var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  if (span1.innerWidth() >= 50){

    let txtArea = $("#metaIn")

    txtArea.on("keydown", (ev) => {

        console.clear()

        if (ev.key != "Backspace" && ev.key != "Delete"){

          console.log("max Pixels reached!");

          if (!ellipsisAdded){

            ellipsisAdded = true

            let currentText = txtArea.val()

            let newTxt = currentText.substring(0, currentText.length - 1) + "..."

            txtArea.val(newTxt)

          }

          return false

        }

      })      

  }else{

    $("#metaIn").off("keydown")

    ellipsisAdded = false;

  }

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   

<div class="inputs">

<div class="input-wrap" id="meta-div">

    <h3>Description</h3>

    <div class="countdown" id="metaCount">0 Char</div>

    <div class="countdown" id="metaCountPixel">0px / 920px</div>

    <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

</div>

</div>



<div id="preview">

    <h3>Snippet Preview</h3>

    <div class="outputs">

        <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

        <span class="countspace" id="metaOutPix"></span>

    </div>

</div>

EDIT: Added the feature you talk about in comments, replacing last character by "...".
But take care that the three dots will occupy some pixels, more than a single character

edited Nov 19 at 15:16

answered Nov 19 at 12:32

Calvin Nunes

3,5832933

Thank you that's exactly what I needed.
– jobe
Nov 19 at 13:21

could you also tell me how I would replace the last three characters with "...".
– jobe
Nov 19 at 13:33

you can set the innerText of the textarea with the same text but removing the last character and adding the "...", I'll edit my answer to add this feature
– Calvin Nunes
Nov 19 at 15:08

once again thank you. I have one more things to add: this method does not work after pasting in a string that exceeds the 920px limit. you can keep typing on forever then. Would you help me fix this problem?
– jobe
2 days ago

it's important that when you are making many questions you see if it's not going out of the scope of the main question you made, if yes, then create a new question here in S.O. In this case, I think it's better to make a new one, because now you'll need another kind of listener, for when user paste something. Create a new question, you'll get more visibility to get answers that can help, I'm out of time to help now.
– Calvin Nunes
2 days ago

add a comment |

up vote
0
down vote

accepted

You mean something like this in my snippet below?

var ellipsisAdded = false

function snippet(){

  var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  if (span1.innerWidth() >= 50){

    let txtArea = $("#metaIn")

    txtArea.on("keydown", (ev) => {

        console.clear()

        if (ev.key != "Backspace" && ev.key != "Delete"){

          console.log("max Pixels reached!");

          if (!ellipsisAdded){

            ellipsisAdded = true

            let currentText = txtArea.val()

            let newTxt = currentText.substring(0, currentText.length - 1) + "..."

            txtArea.val(newTxt)

          }

          return false

        }

      })      

  }else{

    $("#metaIn").off("keydown")

    ellipsisAdded = false;

  }

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   

<div class="inputs">

<div class="input-wrap" id="meta-div">

    <h3>Description</h3>

    <div class="countdown" id="metaCount">0 Char</div>

    <div class="countdown" id="metaCountPixel">0px / 920px</div>

    <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

</div>

</div>



<div id="preview">

    <h3>Snippet Preview</h3>

    <div class="outputs">

        <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

        <span class="countspace" id="metaOutPix"></span>

    </div>

</div>

EDIT: Added the feature you talk about in comments, replacing last character by "...".
But take care that the three dots will occupy some pixels, more than a single character

edited Nov 19 at 15:16

answered Nov 19 at 12:32

Calvin Nunes

3,5832933

Thank you that's exactly what I needed.
– jobe
Nov 19 at 13:21

could you also tell me how I would replace the last three characters with "...".
– jobe
Nov 19 at 13:33

you can set the innerText of the textarea with the same text but removing the last character and adding the "...", I'll edit my answer to add this feature
– Calvin Nunes
Nov 19 at 15:08

once again thank you. I have one more things to add: this method does not work after pasting in a string that exceeds the 920px limit. you can keep typing on forever then. Would you help me fix this problem?
– jobe
2 days ago

it's important that when you are making many questions you see if it's not going out of the scope of the main question you made, if yes, then create a new question here in S.O. In this case, I think it's better to make a new one, because now you'll need another kind of listener, for when user paste something. Create a new question, you'll get more visibility to get answers that can help, I'm out of time to help now.
– Calvin Nunes
2 days ago

add a comment |

up vote
0
down vote

accepted

You mean something like this in my snippet below?

var ellipsisAdded = false

function snippet(){

  var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  if (span1.innerWidth() >= 50){

    let txtArea = $("#metaIn")

    txtArea.on("keydown", (ev) => {

        console.clear()

        if (ev.key != "Backspace" && ev.key != "Delete"){

          console.log("max Pixels reached!");

          if (!ellipsisAdded){

            ellipsisAdded = true

            let currentText = txtArea.val()

            let newTxt = currentText.substring(0, currentText.length - 1) + "..."

            txtArea.val(newTxt)

          }

          return false

        }

      })      

  }else{

    $("#metaIn").off("keydown")

    ellipsisAdded = false;

  }

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   

<div class="inputs">

<div class="input-wrap" id="meta-div">

    <h3>Description</h3>

    <div class="countdown" id="metaCount">0 Char</div>

    <div class="countdown" id="metaCountPixel">0px / 920px</div>

    <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

</div>

</div>



<div id="preview">

    <h3>Snippet Preview</h3>

    <div class="outputs">

        <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

        <span class="countspace" id="metaOutPix"></span>

    </div>

</div>

EDIT: Added the feature you talk about in comments, replacing last character by "...".
But take care that the three dots will occupy some pixels, more than a single character

edited Nov 19 at 15:16

answered Nov 19 at 12:32

Calvin Nunes

3,5832933

You mean something like this in my snippet below?

var ellipsisAdded = false

function snippet(){

  var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  if (span1.innerWidth() >= 50){

    let txtArea = $("#metaIn")

    txtArea.on("keydown", (ev) => {

        console.clear()

        if (ev.key != "Backspace" && ev.key != "Delete"){

          console.log("max Pixels reached!");

          if (!ellipsisAdded){

            ellipsisAdded = true

            let currentText = txtArea.val()

            let newTxt = currentText.substring(0, currentText.length - 1) + "..."

            txtArea.val(newTxt)

          }

          return false

        }

      })      

  }else{

    $("#metaIn").off("keydown")

    ellipsisAdded = false;

  }

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   

<div class="inputs">

<div class="input-wrap" id="meta-div">

    <h3>Description</h3>

    <div class="countdown" id="metaCount">0 Char</div>

    <div class="countdown" id="metaCountPixel">0px / 920px</div>

    <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

</div>

</div>



<div id="preview">

    <h3>Snippet Preview</h3>

    <div class="outputs">

        <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

        <span class="countspace" id="metaOutPix"></span>

    </div>

</div>

EDIT: Added the feature you talk about in comments, replacing last character by "...".
But take care that the three dots will occupy some pixels, more than a single character

var ellipsisAdded = false

function snippet(){

  var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  if (span1.innerWidth() >= 50){

    let txtArea = $("#metaIn")

    txtArea.on("keydown", (ev) => {

        console.clear()

        if (ev.key != "Backspace" && ev.key != "Delete"){

          console.log("max Pixels reached!");

          if (!ellipsisAdded){

            ellipsisAdded = true

            let currentText = txtArea.val()

            let newTxt = currentText.substring(0, currentText.length - 1) + "..."

            txtArea.val(newTxt)

          }

          return false

        }

      })      

  }else{

    $("#metaIn").off("keydown")

    ellipsisAdded = false;

  }

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   

<div class="inputs">

<div class="input-wrap" id="meta-div">

    <h3>Description</h3>

    <div class="countdown" id="metaCount">0 Char</div>

    <div class="countdown" id="metaCountPixel">0px / 920px</div>

    <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

</div>

</div>



<div id="preview">

    <h3>Snippet Preview</h3>

    <div class="outputs">

        <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

        <span class="countspace" id="metaOutPix"></span>

    </div>

</div>

var ellipsisAdded = false

function snippet(){

  var metaIn = document.getElementById('metaIn');

  var metaOut = document.getElementById('metaOut');

  metaOut.value = metaIn.value;



  var metaOutPix = document.getElementById('metaOutPix');

  metaOutPix.value = metaIn.value;



  document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value

  var span1 = $( "span#metaOutPix" );

  $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 920px");



  var metaNum = metaIn.value

  var metaCount = metaNum.length;

  document.getElementById("metaCount").innerHTML = metaCount + " Char";



  if (span1.innerWidth() >= 50){

    let txtArea = $("#metaIn")

    txtArea.on("keydown", (ev) => {

        console.clear()

        if (ev.key != "Backspace" && ev.key != "Delete"){

          console.log("max Pixels reached!");

          if (!ellipsisAdded){

            ellipsisAdded = true

            let currentText = txtArea.val()

            let newTxt = currentText.substring(0, currentText.length - 1) + "..."

            txtArea.val(newTxt)

          }

          return false

        }

      })      

  }else{

    $("#metaIn").off("keydown")

    ellipsisAdded = false;

  }

}

@import url("https://fonts.googleapis.com/css?family=Raleway");

html, body {

  font-family: Raleway, sans-serif;

  margin: 3px;

  max-width: 80em;

  overflow-x: hidden; }



h1 {

  margin-top: 1em;

  text-align: center; }



.input-wrap {

  width: 100%; }

  .input-wrap h3 {

    font-size: 20px;

    text-transform: lowercase;

    background: #254e61;

    color: #ffffff;

    padding: 0.5em;

    margin: 0;

    line-height: .2em;}

  .input-wrap textarea {

    margin: 0 0 10px 0;

    width: 100%;

    height: 5em;

    resize: none;

    border: solid 2px #254e61;

    padding: 5px;

    font-size: 14px;

    font-family: arial; }

  .input-wrap #metaIn {

    height: 8em; }



#preview {

  width: 100%;

  border: solid 2px #5badff;

  margin-top: 1.5em; }

  #preview h3 {

    font-size: 22px;

    padding: 0.5em;

    background-color: #5badff;

    color: #ffffff;

    margin: 0;

    line-height: .4em; }



.outputs {

  padding: 4px; }



#metaOut {

  border: none;

  width: 100%;

  resize: none;

  overflow: hidden; }



#metaOut, #metaOutPix {

  font-family: arial, sans-serif;

  color: #545454;

  line-height: 20px;

  font-size: 13px;

}

#metaOut{

  max-width: 460px;

  height: 100px;

}



.countspace{

  white-space: nowrap;

  display: none;

}



.countdown {

  color: white;

  margin-top: -22px;

  padding-right: 5px;

  font-size: 18px; }



#metaCount{

  text-align: center;

}

#metaCountPixel{

  text-align: right;

}







@media (min-width: 750px) {

  body, html {

    width: 80%;

    margin: auto; } }

@media (min-width: 1280px) {

  .inputs {

    display: grid;

    margin-top: 30px;

    grid-gap: 8px;

    grid-template-areas: ". tworow" ". tworow"; }



  .input-wrap:nth-child(3) {

    grid-area: tworow; }

    .input-wrap:nth-child(3) #metaIn {

      height: 192px !important; }



  .input-wrap textarea {

    margin: 0 0 0 0; }



 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   

<div class="inputs">

<div class="input-wrap" id="meta-div">

    <h3>Description</h3>

    <div class="countdown" id="metaCount">0 Char</div>

    <div class="countdown" id="metaCountPixel">0px / 920px</div>

    <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea>

</div>

</div>



<div id="preview">

    <h3>Snippet Preview</h3>

    <div class="outputs">

        <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea>

        <span class="countspace" id="metaOutPix"></span>

    </div>

</div>

edited Nov 19 at 15:16

answered Nov 19 at 12:32

Calvin Nunes

3,5832933

edited Nov 19 at 15:16

answered Nov 19 at 12:32

Calvin Nunes

3,5832933

answered Nov 19 at 12:32

Calvin Nunes

3,5832933

answered Nov 19 at 12:32

Calvin Nunes

3,5832933

Thank you that's exactly what I needed.
– jobe
Nov 19 at 13:21

could you also tell me how I would replace the last three characters with "...".
– jobe
Nov 19 at 13:33

you can set the innerText of the textarea with the same text but removing the last character and adding the "...", I'll edit my answer to add this feature
– Calvin Nunes
Nov 19 at 15:08

once again thank you. I have one more things to add: this method does not work after pasting in a string that exceeds the 920px limit. you can keep typing on forever then. Would you help me fix this problem?
– jobe
2 days ago

it's important that when you are making many questions you see if it's not going out of the scope of the main question you made, if yes, then create a new question here in S.O. In this case, I think it's better to make a new one, because now you'll need another kind of listener, for when user paste something. Create a new question, you'll get more visibility to get answers that can help, I'm out of time to help now.
– Calvin Nunes
2 days ago

add a comment |

Thank you that's exactly what I needed.
– jobe
Nov 19 at 13:21

could you also tell me how I would replace the last three characters with "...".
– jobe
Nov 19 at 13:33

you can set the innerText of the textarea with the same text but removing the last character and adding the "...", I'll edit my answer to add this feature
– Calvin Nunes
Nov 19 at 15:08

once again thank you. I have one more things to add: this method does not work after pasting in a string that exceeds the 920px limit. you can keep typing on forever then. Would you help me fix this problem?
– jobe
2 days ago

it's important that when you are making many questions you see if it's not going out of the scope of the main question you made, if yes, then create a new question here in S.O. In this case, I think it's better to make a new one, because now you'll need another kind of listener, for when user paste something. Create a new question, you'll get more visibility to get answers that can help, I'm out of time to help now.
– Calvin Nunes
2 days ago

Thank you that's exactly what I needed.
– jobe
Nov 19 at 13:21

could you also tell me how I would replace the last three characters with "...".
– jobe
Nov 19 at 13:33

you can set the innerText of the textarea with the same text but removing the last character and adding the "...", I'll edit my answer to add this feature
– Calvin Nunes
Nov 19 at 15:08

once again thank you. I have one more things to add: this method does not work after pasting in a string that exceeds the 920px limit. you can keep typing on forever then. Would you help me fix this problem?
– jobe
2 days ago

it's important that when you are making many questions you see if it's not going out of the scope of the main question you made, if yes, then create a new question here in S.O. In this case, I think it's better to make a new one, because now you'll need another kind of listener, for when user paste something. Create a new question, you'll get more visibility to get answers that can help, I'm out of time to help now.
– Calvin Nunes
2 days ago

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu