Question

我正在构建一个工具，您可以在其中预览Google如何显示结果。当用户输入超过920个像素的字符时，结果应将其截断并添加“ ...”。

我不能使用max-length来做到这一点，因为每个字母和字体都有不同的宽度。在javascript中，我使输出等于输入，然后创建了第二个没有换行符的输出。如果我将使用第一个输出，则innerWidth不会返回字符串的像素宽度，而是整个块的像素宽度。第二个输出是不可见的，仅用于测量目的。

当innerWidth为920px或大于920px时，我尝试使用了preventDefault方法。但是它并没有为我工作。在这里不能在输出div上使用text-overflow属性，因为我不想容器的宽度是动态的，而不是460px * 2行或306px * 3行等的宽度...

在此处使用的相应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>

Answer 1

您的意思是在下面的我的代码段中这样表示？

我曾经在keydown达到920像素或更高时在textarea中添加一个Backspace侦听器，在此侦听器中，我设置为仅允许Delete和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; } }键，其他任何键都将被忽略，并返回false。

（仅用于测试，我限制为50px而不是920）

@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>

"..."

编辑：添加了您在评论中讨论的功能，用import time import multiprocessing def calc_square(numbers): for n in numbers: print('square ' + str(n*n)) def calc_cube(numbers): for n in numbers: print('cube ' + str(n*n*n)) if __name__ == "__main__": arr = [2,3,8] p1 = multiprocessing.Process(target=calc_square,args=(arr,)) p2 = multiprocessing.Process(target=calc_cube,args=(arr,)) p1.start() p2.start() p1.join() p2.join() print("Done!")替换了最后一个字符。但是请注意，三个点将占据一些像素，而不是单个字符

达到像素宽度后阻止Textarea输入

1 个答案: