Question

我一直在处理这段代码，以便在10秒的定时器上获得地理位置，结果将显示在文本区域中。问题是我如何在不替换旧结果的情况下附加新结果，如果需要，可能会自动扩展textarea。

    <!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的textarea：

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不适合你。

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

获取textarea的内容并将其放入变量中。
连接您尝试附加到该变量的内容（txt_area_content + new_to_append）
清除该textarea的内容，然后放入连接的内容。

Answer 3

jsfiddle DEMO

您使用value表示textarea而不是innerHTML。然后，您可以使用+=向其附加文字。

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

现在，如果你得到textarea的值，它将是

console.log(mTextArea.value);

一些文字。其他一些文字。

编辑：

要让textarea自动展开，您需要将其height设置为scrollHeight。

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

因此，如果文本以编程方式添加到textarea，那么之后只需调用该函数，如resizeTextArea(mTextArea);

如果您希望在键入时调整大小：

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

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

编辑2：

要开始换行，请使用"\n"。

＆＃34;这是第一行。\ n这是第二行。＆＃34;

html附加到textarea

3 个答案: