предотвращение ввода текстовой области после достижения ширины пикселя - PullRequest
Новая
       8

предотвращение ввода текстовой области после достижения ширины пикселя

0 голосов
/ 19 ноября 2018

Я создаю инструмент, в котором вы можете просмотреть, как Google будет отображать ваш результат.Когда пользователь вводит более 920 пикселей символов, результат должен обрезать его и добавить «...».

Я не могу сделать это, используя максимальную длину, потому что каждая буква и шрифт имеют разную ширину.,В javascript я делаю вывод равным вводу, затем я создал второй вывод, который не имеет разрыва строки.Если бы я использовал первый вывод, innerWidth не вернул бы ширину в пикселях строки, но всего блока.Второй выход невидим, так как он предназначен только для измерения.

Я пытался использовать метод protectDefault, когда innerWidth = или> 920px.Но это не сработало для меня.Использование свойства переполнения текста в выходном элементе div нельзя использовать здесь, потому что я не хочу, чтобы ширина контейнеров была динамической, а не ширина 460px * 2 строки или 306px * 3 строки и т. Д. *

Какую функцию corrent if использовать здесь и как мне предотвратить дальнейший ввод?

Спасибо за вашу помощь.

Примечание: игнорируйте плохо написанный CSS, я быстро скопировал его из документа, который не могу показать.

 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 Ответ

0 голосов
/ 19 ноября 2018

Вы имеете в виду что-то подобное в моем фрагменте ниже?

Я использовал добавление keydown слушателя в textarea, когда он достигает 920px или больше, в этом слушателе я установил, что будут разрешены только клавиши Backspace и Delete, любая другая клавиша будет игнорироваться с помощью вернуть false.

(только для тестов я ограничил 50px вместо 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>

РЕДАКТИРОВАТЬ : добавлена ​​функция, о которой вы говорите в комментариях, заменив последний символ на "...". Но позаботьтесь о том, чтобы три точки занимали несколько пикселей, а не один символ

...