Question

我有这个文本框，您可以在其中粘贴大块文本，它将输出文本行数。但是，它只能在将一个键按入盒子后才能工作。因此，如果我右键单击并点击“粘贴”，那么在我按下键盘上的键之前，它不会显示行数如何在粘贴文本时自动显示行数？

这是我目前的代码：

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
    resize: none;
}
</style>

<script>

function countLines(theArea)
{
  var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"\n").split("\n");

  if(theLines[theLines.length-1]=="")
  theLines.length--;
  theArea.form.lineCount.value = theLines.length;
}
</script>

<script type="text/javascript">
var observe;
if (window.attachEvent) 
{
    observe = function (element, event, handler) 
    {
        element.attachEvent('on'+event, handler);
    };
}
else 
{
    observe = function (element, event, handler)
    {
        element.addEventListener(event, handler, false);
    };
}
function init ()
{
    var text = document.getElementById('text');
    function resize () 
    {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize ()
    {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}


</script>

</head>

<body onload="init();">
<form>


<textarea rows="5" cols="40" style="height:1em;" id="text"; name="myText" onKeyUp="countLines(this)">

</textarea>


<br>
Cost: <input type=text name="lineCount" size="1" value="0"> Dollars

</form>
</body>

</html>

Answer 1

您的问题是您正在使用keyup功能。请记住，用户正在粘贴文本而不是按任何键。 <textarea rows="5" cols="40" style="height:1em;" id="text"; name="myText" onchange="countLines(this)">

使用onchange属性，该属性在文本区域的值更改时发生。

注意：正如@Sly指出在javascript中这样做更值得推荐：

$("textarea").change(function(){ //your function here}

Or even better

Answer 2

当事情发生时，你需要告诉它改变。如果您已经这样做了，请编辑您的问题。

我想你的代码看起来像：

<textarea onchange="your_function();">

</textarea>

现在，如果你已经完成了它并且它不起作用，那么我会建议每隔几秒运行一次。

在您的Javascript中，如果您正在使用它，请使用以下代码：

window.setInterval(your_function, time_in_miliseconds)

如何创建识别文本的功能？

2 个答案: