Tworzę narzędzie, w którym możesz podejrzeć, jak Google wyświetli Twój wynik. Gdy użytkownik wprowadzi więcej niż 920 pikseli znaków, wynik powinien zostać odcięty i dodać "...".

Nie mogę tego zrobić używając maksymalnej długości, ponieważ każda litera i czcionka ma inną szerokość. W javascript robię wyjście równe wejściu, a następnie stworzyłem drugie wyjście, które nie ma łamania linii. Gdybym użył pierwszego wyjścia, innerWidth nie zwróciłby szerokości ciągu w pikselach, ale całego bloku. Drugie wyjście jest niewidoczne, ponieważ służy tylko do celów pomiarowych.

Próbowałem użyć metody PreventDefault, gdy innerWidth wynosi = lub > niż 920px. Ale to nie działa dla mnie. Nie można tutaj użyć właściwości text-overflow na wyjściowym div, ponieważ nie chcę, aby szerokość kontenerów była dynamiczna, a nie szerokość 460px * 2 wiersze lub 306px * 3 wiersze itp...

Jaka byłaby prawidłowa funkcja if do użycia w tym miejscu i jak zapobiec dalszemu wprowadzaniu danych?

Dziękuję za pomoc.

Uwaga dodatkowa: Zignoruj ​​źle napisany CSS, który szybko skopiowałem z mojego dokumentu, którego nie mogę pokazać.

 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>
1
jobe 19 listopad 2018, 15:11

1 odpowiedź

Najlepsza odpowiedź

Masz na myśli coś takiego w moim fragmencie poniżej?

Użyłem dodania odbiornika keydown w textarea, gdy osiągnie 920px lub więcej, w tym odbiorniku ustawiłem, że dozwolone będą tylko klucze Backspace i Delete, każdy inny klucz zostanie zignorowany ze zwrotem false.

(Tylko dla testów ograniczyłem się do 50px zamiast 920)

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 / 50px");

  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 / 50px</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>

EDYTUJ: dodano funkcję, o której mówisz w komentarzach, zastępując ostatni znak przez "...". Ale uważaj, aby trzy kropki zajmowały kilka pikseli, więcej niż jeden znak

0
Calvin Nunes 7 grudzień 2018, 20:38