Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.11.2019, 03:47
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 30.12.2015
Сообщений: 82

Помогите решить проблему с INPUT
<!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, в который нельзя от руки прописать какие-либо символы, можно только вставить скопированный текст, после этого внизу отображается этот текст, который становится кликабельным, при нажатии открывается страница в новом окне.
Текст - это "добавка" к основному адресу - в данном пример использовал адрес этого форума, а доп текст это разделы форума.

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

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

Последний раз редактировалось Feex, 16.11.2019 в 03:55.
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2019, 05:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,634

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

Последний раз редактировалось laimas, 16.11.2019 в 05:59.
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2019, 12:01
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 30.12.2015
Сообщений: 82

Сообщение от laimas Посмотреть сообщение
Нужно по фокусу устанавливать курсор в конец определенного значения s. А очистка, это как, руками, кнопкой?
очистка поля - выделили текст, находящийся в поле, и удалили его.
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2019, 12:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,634

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

<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>

Последний раз редактировалось laimas, 16.11.2019 в 12:45.
Ответить с цитированием
  #5 (permalink)  
Старый 16.11.2019, 13:11
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 30.12.2015
Сообщений: 82

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

Последний раз редактировалось Feex, 16.11.2019 в 15:09.
Ответить с цитированием
  #6 (permalink)  
Старый 16.11.2019, 13:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,023

Feex,
не копируйте сообщение целиком без необходимости, есть Цитата выделенного
Ответить с цитированием
  #7 (permalink)  
Старый 16.11.2019, 13:28
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 30.12.2015
Сообщений: 82

Сообщение от рони Посмотреть сообщение
Feex,
не копируйте сообщение целиком без необходимости, есть Цитата выделенного
Приветствую вас.
Суть в том, что текст в поле должен быть скопирован (выделен) полностью, и удален полностью ИЛИ заменен на новый.
В случае выделения текста в поле и замены (ctrl+v) - всё работает.
В случае удаления из поля выделенного текста, а потом вставки нового текста - ничего не работает В примере это все легко увидеть, если запустить код.
Ответить с цитированием
  #8 (permalink)  
Старый 16.11.2019, 13:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,023

Сообщение от Feex
Суть в том,
не понимаю вашего сообщения.
Ответить с цитированием
  #9 (permalink)  
Старый 16.11.2019, 14:08
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 30.12.2015
Сообщений: 82

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

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

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

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

Как еще это объяснить, я тоже не знаю.
Ответить с цитированием
  #10 (permalink)  
Старый 16.11.2019, 14:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,023

Feex,
пост #5 зачем там пост #4 полностью?
Сообщение от Feex
Как еще это объяснить, я тоже не знаю.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите решить проблему со скроллом Jigan2 jQuery 0 20.03.2015 09:42
проверка input (пожалуйста, помогите) alma95 Общие вопросы Javascript 13 17.02.2015 13:26
Помогите решить проблему с ссылками. Bananza Элементы интерфейса 10 06.02.2015 08:26
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27
Помогите решить задачу vkg Общие вопросы Javascript 1 20.02.2008 10:59