html 附加到文本区域

Question

我一直在研究这段代码以在 10 秒的计时器上获取地理定位，结果将显示在文本区域中。问题是如何在不替换旧结果的情况下添加新结果，并在必要时自动扩展文本区域。

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML that display geolocation</title>
</head>
<body>
    <textarea rows="50" cols="100" id="demo"></textarea>

    <script>
        var x = document.getElementById("demo");
        var timer = setInterval(function () { getLocation() }, 10000);

        function getLocation()
        {
            if (navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(success, error)
            }
            else
            {
                x.innerHTML = "Geoloaction is not supported."
            }
        }

        function success(pos)
        {
            var y = pos.coords;
            var z = new Date().toLocaleTimeString();
            x.innerHTML = z + "  Latitude: " + y.latitude + " Longitude" + y.longitude;
        }

        function error(err)
        {
            switch (error.code)
            {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "The request to get user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "An unknown error occurred."
                    break;
            }
        }
    </script>
</body>
</html>

Answer 1

使用 += 而不是 = 将内容附加到您设置 x.innerHTML:

的文本区域

function success(pos){
  var y = pos.coords;
  var z = new Date().toLocaleTimeString();
  x.innerHTML += z + "  Latitude: " + y.latitude + " Longitude" + y.longitude;
}

Answer 2

我看到您没有在其中使用 jQuery，因此 .append 不适合您。

对于您的解决方案，您可以按照以下步骤操作：

获取文本区域的内容并将其放入变量中。
连接您要附加到该变量的内容 (txt_area_content+new_to_append)
清除该文本区域的内容，然后放入您连接的内容。

Answer 3

jsfiddle DEMO

您使用 value 作为 textarea 而不是 innerHTML。然后您可以使用 += 向其附加文本。

var mTextArea = document.getElementById("demo");
mTextArea.value = "Some text.";
mTextArea.value += " Some other text.";

现在，如果您获得文本区域的值，它将是

console.log(mTextArea.value);

Some text. Some other text.

编辑：

要使文本区域自动展开，您需要将其 height 设置为 scrollHeight。

function resizeTextArea(elm) {
    elm.style.height = elm.scrollHeight + 'px';
}

因此，如果以编程方式将文本添加到文本区域，则只需在之后调用该函数，如 resizeTextArea(mTextArea);

如果您希望它在您键入时调整大小，那么：

var mTextArea = document.getElementById('demo');

mTextArea.addEventListener('keyup', function() {
    this.style.height = this.scrollHeight + 'px';
});

编辑 2：

要开始新的一行，请使用 "\n"。

"This is the first line.\nThis is the second line."

html 附加到文本区域

html append to textarea

html

textarea

geolocation