Question

我已经制作了一个文本框，我将文本输入到文本框中，并在键入时在下面的div中打印出来。目前，DIV可以容纳24个字符，然后我有要包装的文本。我要做的是让每24个字符的DIV高度加倍。

我想只使用Javascript而不使用jQuery

<div class="one">Input Some Text
        <form>
            <input type="text" id="pointlessInput"/>
            <script>
                var stringToBePrinted = document.getElementById("pointlessInput");
                var len = stringToBePrinted.length;

                stringToBePrinted.onkeyup = function(){
                    var len = stringToBePrinted.length;
                    document.getElementById("printbox").innerHTML = stringToBePrinted.value;
                    if(document.getElementById("pointlessInput").innerHTML.value.length == 24){
                        document.getElementById("printbox").style.height = "4em";
                    }
                }

            </script>
        </form>
        <div class="printbox" id="printbox"></div>
    </div>

样式表

.printbox {
border-width:thick 10px;
border-style: solid; 
background-color:#fff;
line-height: 2;
color:#6E6A6B;
font-size: 14pt;
text-align:center;
border: 3px solid #969293;
width:50%;
height:2em;
margin: auto;
word-wrap: break-word;
}

Answer 1

var stringToBePrinted = document.getElementById("pointlessInput");

stringToBePrinted.onkeyup = function() {
  document.getElementById("printbox").innerHTML = stringToBePrinted.value;
  var multiple = Math.ceil(parseInt(document.getElementById("pointlessInput").value.length) / 24);
  document.getElementById("printbox").style.height = (multiple * 2) + "em";   
}

Answer 2

从css中删除if条件和高度，它可以正常工作。请查看以下工作示例。

var stringToBePrinted = document.getElementById("pointlessInput");
var len = stringToBePrinted.length;

stringToBePrinted.onkeyup = function(){
var len = stringToBePrinted.length;
document.getElementById("printbox").innerHTML = stringToBePrinted.value;
}

.printbox {
border-width:thick 10px;
border-style: solid; 
background-color:#fff;
line-height: 2;

color:#6E6A6B;
font-size: 14pt;
text-align:center;
border: 3px solid #969293;
width:50%;
margin: auto;
word-wrap: break-word;
}

<div class="one">Input Some Text
        <form>
            <input type="text" id="pointlessInput"/>
            <script>
                
            </script>
        </form>
        <div class="printbox" id="printbox"></div>
    </div>

根据文本字段

2 个答案: