Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Ошибка при замене части url при вводе через input (https://javascript.ru/forum/dom-window/64268-oshibka-pri-zamene-chasti-url-pri-vvode-cherez-input.html)

Feex 30.07.2016 20:49

Ошибка при замене части url при вводе через input
 
Доброго времени суток.
При вводе в ручную информации в поле ввода происходит какая-то ерудна, тяжело объяснить, это надо видеть.
Но, при вводе информации путем вставки скопированной информации (Ctrl+V) - всё нормально!
Подскажите, что не так. И, если можно, исправьте, пожалуйста.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
font-family: "Helvetica Neue",Arial,sans-serif;
font-size:17px;
}
.vydelit {
color: rgb(251, 72, 2);
}
</style>
</head>
<body>
<center>
<table id="demotable">
<thead><tr>
<td>IP: <input type="text" id="raz" value="31.47.177.168"/> Порт: <input type="text" id="raz2" value="4022"/>
</td>
</tr></thead>
<tbody>
<td><span>&lt;img src="</span>http://monitor.zone-game.info/check.php?do=status&ip=<b class="vydelit">31.47.177.168</b>&port=<b class="vydelit">4022</b>&id=33<span>"&gt;</span><br>
<img src="http://monitor.zone-game.info/check.php?do=status&ip=31.47.177.168&port=4022&id=33" />
</td>
</tbody>
</table> 
<script>
(function(){
var s = '31.47.177.168';
document.getElementById('raz').oninput = function() {
  var d = document.querySelector('#demotable tbody');
  d.innerHTML = d.innerHTML.replace(new RegExp(s,"g"), this.value);
  s = this.value;
}
})()
</script>
<script>
(function(){
var s = '4022';
document.getElementById('raz2').oninput = function() {
  var d = document.querySelector('#demotable tbody');
  d.innerHTML = d.innerHTML.replace(new RegExp(s,"g"), this.value);
  s = this.value;
}
})()
</script>
для примера скопируйте ip: 176.100.91.83 и Порт: 8881 и вставьте через Ctrl+V
</center>
</body>
</html>

рони 30.07.2016 21:04

Feex,
попробуйте указать кодировку
<meta charset="utf-8">

Feex 30.07.2016 21:28

Цитата:

Сообщение от рони (Сообщение 423856)
Feex,
попробуйте указать кодировку
<meta charset="utf-8">

отредактировал пример - тот же результат. ввожу от руки в оба поля цифры, буквы, все перемешивается.. Через Ctrl+V все нормально.

рони 30.07.2016 21:33

Feex,
возможно не учитываите множественную перезапись при вводе посимвольно

Feex 30.07.2016 21:36

Если честно, я там ничего не учитываю) ибо мои познания так далеко не продвинулись.. Да и случайно вообще обнаружил этот баг, решил руками повводить и тут такое..

Feex 30.07.2016 21:42

Это как-то можно исправить?

рони 30.07.2016 21:50

Feex,
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
font-family: "Helvetica Neue",Arial,sans-serif;
font-size:17px;
}
.vydelit {
color: rgb(251, 72, 2);
}
</style>
</head>
<body>
<center>
<table id="demotable">
<thead><tr>
<td>IP: <input type="text" id="raz" value="31.47.177.168"/> Порт: <input type="text" id="raz2" value="4022"/>
</td>
</tr></thead>
<tbody>
<td><span>&lt;img src="</span>http://monitor.zone-game.info/check.php?do=status&ip=<b class="vydelit">31.47.177.168</b>&port=<b class="vydelit">4022</b>&id=33<span>"&gt;</span><br>
<img src="http://monitor.zone-game.info/check.php?do=status&ip=31.47.177.168&port=4022&id=33" />
</td>
</tbody>
</table>
<script>
var inp = document.querySelectorAll('input'), v = document.querySelectorAll('.vydelit');
[].forEach.call(document.querySelectorAll('input'), function(item,i) {
        item.addEventListener('input', function() {
            v[i].textContent = item.value;
            var p = v[i].parentNode;
            p.querySelector('img').src = "http://monitor.zone-game.info/check.php?do=status&ip="+v[0].textContent+"&port="+v[1].textContent+"&id=33"
        });
    });
</script>
для примера скопируйте ip: 176.100.91.83 и Порт: 8881 и вставьте через Ctrl+V
</center>
</body>
</html>

Feex 30.07.2016 21:57

Цитата:

Сообщение от рони (Сообщение 423863)
Feex,
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
font-family: "Helvetica Neue",Arial,sans-serif;
font-size:17px;
}
.vydelit {
color: rgb(251, 72, 2);
}
</style>
</head>
<body>
<center>
<table id="demotable">
<thead><tr>
<td>IP: <input type="text" id="raz" value="31.47.177.168"/> Порт: <input type="text" id="raz2" value="4022"/>
</td>
</tr></thead>
<tbody>
<td><span>&lt;img src="</span>http://monitor.zone-game.info/check.php?do=status&ip=<b class="vydelit">31.47.177.168</b>&port=<b class="vydelit">4022</b>&id=33<span>"&gt;</span><br>
<img src="http://monitor.zone-game.info/check.php?do=status&ip=31.47.177.168&port=4022&id=33" />
</td>
</tbody>
</table>
<script>
var inp = document.querySelectorAll('input'), v = document.querySelectorAll('.vydelit');
[].forEach.call(document.querySelectorAll('input'), function(item,i) {
        item.addEventListener('input', function() {
            v[i].textContent = item.value;
            var p = v[i].parentNode;
            p.querySelector('img').src = "http://monitor.zone-game.info/check.php?do=status&ip="+v[1].textContent+"&port="+v[2].textContent+"&id=33"
        });
    });
</script>
для примера скопируйте ip: 176.100.91.83 и Порт: 8881 и вставьте через Ctrl+V
</center>
</body>
</html>

C вводом всё супер! Спасибо)
Только есть одно но, там при вводе и в адресе картинки заменились IP и порт. А теперь в адресе картинки ничего не меняется.

рони 30.07.2016 22:08

Feex,
То что делает код вам понятно?

Feex 30.07.2016 22:14

Цитата:

Сообщение от рони (Сообщение 423866)
Feex,
То что делает код вам понятно?

Ну, то, что он делает, это даже видно. Но как он это делает - я далековат еще от этого)

рони 30.07.2016 22:19

Feex,
попробуйте самостоятельно исправить мою ошибку и пожалуйста не копируйте сообщения целиком. если нет желания через 10 минут исправлю.

Feex 30.07.2016 22:25

Цитата:

Сообщение от рони (Сообщение 423869)
Feex,
попробуйте самостоятельно исправить мою ошибку и пожалуйста не копируйте сообщения целиком. если нет желания через 10 минут исправлю.

желание есть, познаний не хватает.. пока, можно сказать, методом тыка собираю какие-то конструкции, часами ковыряюсь, чтоб собрать какую-то мелочь, и здорово, когда получается, но когда упираюсь в неизведанное, то тут уже "часов" не хватит.. а их у меня тоже не сильно много..(
Насколько я понимаю Вы ошибок не дупустили, просто не задействовали саму картинку. Туда надо как-то пристроить "+v[1].textContent+" и "+v[2].textContent+". У меня пока не получается..

рони 30.07.2016 22:34

Цитата:

Сообщение от Feex
пристроить "+v[1].textContent+" и "+v[2].textContent+".

почти горячо , но уже исправлено. смотрите пост 7 снова

Feex 30.07.2016 22:45

вместо "+v[1].textContent+" и "+v[2].textContent+" - "+v[0].textContent+" и "+v[1].textContent+" ))
Т.е даже не трогая саму картинку (url) можно сделать оказывается. т.е не передавая никаких переменных туда? ))

Feex 30.07.2016 22:54

рони,
Спасибо еще раз! Почему то не могу плюс поставить, пишут, что я должен еще кому то добавить отзыв, прежде чем смогу добавить Вам..

warren buffet 30.07.2016 23:32

ТС, у тебя же инпут в таблице, хитемэль которой заменяется при каждом нажатии кнопки. Ты еще бы дом разбирал до фундамента, чтобы попасть в квартиру, а потом собирал бы изнутри, чтобы на диване полежать.

Feex 30.07.2016 23:54

Цитата:

Сообщение от warren buffet (Сообщение 423875)
ТС, у тебя же инпут в таблице, хитемэль которой заменяется при каждом нажатии кнопки. Ты еще бы дом разбирал до фундамента, чтобы попасть в квартиру, а потом собирал бы изнутри, чтобы на диване полежать.

Ты вообще о чем? При каком нажатии кнопки? Покажи мне кнопку в моем коде? Если ты заметил input, то это не всегда "кнопка". В общем, неважно.. вопрос решен, Спасибо Рони еще раз. Не раз уже помог, и на его готовых примерах намного удобнее учиться, чем на поиске в гугле..

warren buffet 31.07.2016 11:23

Цитата:

Сообщение от Feex
Ты вообще о чем?

Не дошло, да? Ну придется утопить

Цитата:

<table id="demotable"><thead><tr><td>IP: <input type="text" id="raz" value="31.47.177.168"/>
...
var d = document.querySelector('#demotable tbody');

В d сейчас таблица, а в таблице input, при нажатии на который

Цитата:

document.getElementById('raz').oninput = function

хтмл всей таблицы заменяется, в том числе заменяется твой input

Цитата:

d.innerHTML = d.innerHTML.replace

И только потому, что там oninput, все и работает. Если бы ты как белый человек повесил .addEventListener, то не пришлось бы сюда переться, поскольку после первого же нажатия и замены хтмля листенер бы сдох и ничего бы не работало дальше. Что, собственно и происходит у тебя при вставке - работает только 1 раз, за одно нажатие, а если нажимать много раз, там шопесец что получается, поскольку инпут постоянно заменяется другим.

Я же говорю, это метод заменить обои путем разборки дома и постройки нового с другими обоями. Еще раз заноешь что рони тебя осчастливил - еще раз урою.

warren buffet 31.07.2016 11:31

И вообще так не делается - чтобы при вводе заменять тексты. Это придется управлять курсором - как в плагине ввода номера телефона, что при вводе больших текстов геморрой. Замена делается при отправке, или при выводе. Получаешь value и заменяешь что на что. Уходит правильное. Если с ввода есть вывод - в элемент, то на выводе заменяешь. В текстовое поле лезть не надо, его содержание в хтмле ОТСУТСВУЕТ.

Feex 31.07.2016 12:04

warren buffet,
ты бухаешь что ли? Или куришь хрень какую-то?.. Завязывай.. У тебя речь уже как у пятикантропа - почитай себя.. или ты думаешь это ааафигеть как круто? Ошибаешься, это ааафигеть как по быдлячему.
Насчет Рони - ему еще раз спасибо! Ибо в отличии от тебя он НЕ быдлит, НЕ пишет много "букаф", а всё коротко и наглядно!!! Твоего варианта решения задачи я пока в теме так и не заметил...

P.S. Судя по Вашей репутации и речи, сударь, у Вас смещение парадигмы восприятия. Если Вас инопланетяне в плен захватят, они решат, что на земле нет разумной жизни.

warren buffet 31.07.2016 12:13

Цитата:

Сообщение от Feex
пятикантропа

Пиздец форуму, одни дебилы тут остались и роня.

Feex 31.07.2016 12:29

Цитата:

Сообщение от warren buffet (Сообщение 423920)
Пиздец форуму, одни дебилы тут остались и роня.

Пока я наблюдаю дебила в единственном числе..

warren buffet 31.07.2016 12:53

Feex, "пятикантроп", расскажи, ты сам догадался заменять value поля ввода путем замены его хтмля, или какое-то чудовище подсказало?

Feex 31.07.2016 13:09

Цитата:

Сообщение от warren buffet (Сообщение 423932)
Feex, "пятикантроп", расскажи, ты сам догадался заменять value поля ввода путем замены его хтмля, или какое-то чудовище подсказало?

Во-первых, в слове "пятикантроп" ты умудрился сделать 11 ошибок.
Во-вторых, такое ощущение, что когда ты в поле тамагочика хоронил, тебя ударила молния.
Ну, и в-третьих, если бы ты внимательно прочитал всю тему, то такие вопросы не задавал бы.


Часовой пояс GMT +3, время: 23:02.