html append to textarea

Я работал над этим фрагментом кода, чтобы получить геолокацию по таймеру 10 секунд, результат будет отображаться в текстовой области. Проблема заключается в том, как добавить новый результат без замены старых и, возможно, автоматически расширить текстовое поле, если это необходимо.html append to 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>

источник

2015-05-09 Jerry

Спасибо за ответы + = определенно помогли. Что произойдет, если я хочу добавить разрыв строки в конце каждой записи, чтобы все они выстроились как список. Спасибо за ваши материалы. – Jerry

jsfiddle DEMO

используется value для textarea не innerHTML. Затем вы можете использовать +=, чтобы добавить текст к нему.

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

Теперь, если вы получите значение текстового поля будет

console.log(mTextArea.value);

Некоторый текст. Другой текст.

EDIT:

Для того, чтобы текстовое поле автоматически вам необходимо установить его 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'; 
});

EDIT 2:

Чтобы начать новую линию, вы используете "\n".

«Это первая строка. \ NЭто вторая строка».

источник

2015-05-09 02:43:31 Samurai

О, боже, как я могу забыть о \ n ....Большое вам спасибо за ваши материалы, полностью решив все мои проблемы. – Jerry

Использование += вместо =, чтобы добавить содержимое в текстовое поле, где вы установили x.innerHTML:

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

источник

2015-05-09 02:37:10

Я вижу, что вы не используете JQuery там так .append не вариант для тебя.

Для вашего решения, вы можете просто выполнить следующие действия:

Получить содержимое текстового поля и поместить его в переменную.
Объедините то, что вы пытаетесь добавить к этой переменной (txt_area_content + new_to_append)
Очистите содержимое этого текстового поля, а затем поместите то, что вы связали.

источник

2015-05-09 02:38:41

html append to textarea

ответ

Смежные вопросы