Форум

Feex · #1 (**permalink**) 16.11.2019, 04:47

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src=""></script>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
input{  
  width: 290px;
  height: 20px;  
 text-align:center;  
}
</style>
</head>
<body><center>
<table width="500"><td>
<script type="text/javascript">
 function validate(evt) {
   var theEvent = evt || window.event;
   var key = theEvent.keyCode || theEvent.which;
   key = String.fromCharCode(key);
  var regex = /[]|\./;
   if(!regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
 }
 </script>

<table id="demotable">
<thead><tr><td>
<label>вставьте текст в поле ниже, например:
<b> misc</b><br> 

<input name="ReceiveNo" id="raz" type="text" class="txtbox" onkeypress='validate(event)' value="dom-window" required tabindex="" />

</label>
</td></tr></thead>
<tbody>        
 <tr><td>

кликните по ссылке:
 
<a href="https://javascript.ru/forum/dom-window" target="_blank">dom-window</a>
 
 
 </td></tr>
</tbody>
</table>
<style>
#demotable {
  width: 100%;
  table-layout: fixed;
}
#demotable td {
  border: 2px dotted rgb(192, 192, 192);
  white-space: pre-line;
  word-wrap: break-word;
  text-align: center;
border-radius: 10px;
}
#demotable a {
  display: inline;
}
#demotable span {
  color: #999;
}
#demotable td.raz {
  background: #f1f1f1;
}
#demotable thead td {
  background: #e0e9f9;
  color: #777;
}
#demotable label {
  display: block;
}
</style>
<script>
(function(){
var s = 'dom-window';
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>
</td></table>
</center>
</body>
</html>

Есть input, в который нельзя от руки прописать какие-либо символы, можно только вставить скопированный текст, после этого внизу отображается этот текст, который становится кликабельным, при нажатии открывается страница в новом окне.
Текст - это "добавка" к основному адресу - в данном пример использовал адрес этого форума, а доп текст это разделы форума.

Всё это работает кроме одного момента:
если сначала удалить текст из поля ввода, а потом вставить нужный нам текст, то получается ерунда.
А если не удалять текст из поля, а просто выделить его и заменить на нужный текст, то всё нормально получается.

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

laimas · #2 (**permalink**) 16.11.2019, 06:54

Нужно по фокусу устанавливать курсор в конец определенного значения s. А очистка, это как, руками, кнопкой?

Feex · #3 (**permalink**) 16.11.2019, 13:01

Сообщение от laimas

Нужно по фокусу устанавливать курсор в конец определенного значения s. А очистка, это как, руками, кнопкой?

очистка поля - выделили текст, находящийся в поле, и удалили его.

laimas · #4 (**permalink**) 16.11.2019, 13:39

Не проще ли в таком случае очищать кнопкой? Следите за кареткой, вставили, выбрали очистить, значит опять установили каретку.
А можно и без этого, но тут с гибкостью не очень:

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
input {
  padding: 5px 5px 5px 38px;
}
input + label:after {
  content: attr(data-path);
  position: absolute;
  top: 13px;
  left: 15px;
  color: #555;
}
</style>

<input id="domain" autocomplete="off" /> <label for="domain" data-path="path/"></label>

<a href="#" data-href="domain.as/path/" target="_blank"></a>

<script>

var d = "path/", field = document.querySelector('input');

field.addEventListener("keypress", function(e) {
    e.preventDefault()
});

field.addEventListener("paste", function(e) {
    this.value = ''
});

field.addEventListener("input", function() {
    var a = document.querySelector('a');
    a.href = a.dataset.href + this.value;
    a.textContent = d + this.value;
});
</script>
</body>
</html>

Feex · #5 (**permalink**) 16.11.2019, 14:11

Сообщение от laimas

Не проще ли в таком случае очищать кнопкой? Следите за кареткой, вставили, выбрали очистить, значит опять установили каретку.
А можно и без этого, но тут с гибкостью не очень:

"выбрали очистить" - как выбрали, где? не совсем понимаю?
что-то уже сложно... ) как-то может что-то другое можно придумать? По-проще..
Чтобы при очистке поля, в моем примере, и вставке текста не появлялись "глюки"...
В общем на данный момент я не представляю что можно сделать.. Собственно поэтому и пришел сюда. Я с этой темой не вчера начал возиться. облазил гуглы, яндексы, шмандексы, все что смог найти - постарался внедрить, остальное найти не смог, да знать бы что искать уже..

рони · #6 (**permalink**) 16.11.2019, 14:18

Feex,
не копируйте сообщение целиком без необходимости, есть Цитата выделенного

Feex · #7 (**permalink**) 16.11.2019, 14:28

Сообщение от рони

Feex,
не копируйте сообщение целиком без необходимости, есть Цитата выделенного

Приветствую вас.
Суть в том, что текст в поле должен быть скопирован (выделен) полностью, и удален полностью ИЛИ заменен на новый.
В случае выделения текста в поле и замены (ctrl+v) - всё работает.
В случае удаления из поля выделенного текста, а потом вставки нового текста - ничего не работает В примере это все легко увидеть, если запустить код.

рони · #8 (**permalink**) 16.11.2019, 14:50

Сообщение от Feex

Суть в том,

не понимаю вашего сообщения.

Feex · #9 (**permalink**) 16.11.2019, 15:08

Сообщение от рони

не понимаю вашего сообщения.

запустите мой код.
Далее, скопируйте текст misc (или любой другой какой хотите)
выделите текст в поле ввода
нажмите ctrl+v - вставится ваш текст, который вы скопировали
можете нажать на полученную ссылку (необязательно) главное ПОЛУЧИТЬ ссылку.
Этот вариант работает как надо!!!

вариант 2:
запустите мой код.
Далее, скопируйте текст misc (или любой другой какой хотите)
выделите текст в поле ввода
удалите текст из поля ввода
нажмите ctrl+v - вставится ваш текст, который вы скопировали
И вот тут вы увидите косяк, о котором я и писал в первом посте.

А просьба состоит в том, чтобы устранить это косяк, чтобы во втором варианте действий пункт нажмите ctrl+v - вставится ваш текст, который вы скопировали отработал так же как и в первом варианте, т.е чтобы пр любых возможных действиях с полем ввода, получался нужный результат - это ссылка ниже, по которой можно кликнуть.

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

Как еще это объяснить, я тоже не знаю.

рони · #10 (**permalink**) 16.11.2019, 15:44

Feex,
пост #5 зачем там пост #4 полностью?

Сообщение от Feex

Как еще это объяснить, я тоже не знаю.

Форум

Справочник

Discord чат

Курсы javascript