16.11.2019, 04:47
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 94
|
|
|
Помогите решить проблему с 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 в 04:55.
|
|
16.11.2019, 06:54
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Нужно по фокусу устанавливать курсор в конец определенного значения s. А очистка, это как, руками, кнопкой?
Последний раз редактировалось laimas, 16.11.2019 в 06:59.
|
|
16.11.2019, 13:01
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 94
|
|
Сообщение от laimas
|
|
Нужно по фокусу устанавливать курсор в конец определенного значения s. А очистка, это как, руками, кнопкой?
|
очистка поля - выделили текст, находящийся в поле, и удалили его. |
|
16.11.2019, 13:39
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Не проще ли в таком случае очищать кнопкой? Следите за кареткой, вставили, выбрали очистить, значит опять установили каретку.
А можно и без этого, но тут с гибкостью не очень:
<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 в 13:45.
|
|
16.11.2019, 14:11
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 94
|
|
|
Сообщение от laimas
|
Не проще ли в таком случае очищать кнопкой? Следите за кареткой, вставили, выбрали очистить, значит опять установили каретку.
А можно и без этого, но тут с гибкостью не очень:
|
"выбрали очистить" - как выбрали, где? не совсем понимаю?
что-то уже сложно... ) как-то может что-то другое можно придумать? По-проще..
Чтобы при очистке поля, в моем примере, и вставке текста не появлялись "глюки"...
В общем на данный момент я не представляю что можно сделать.. Собственно поэтому и пришел сюда. Я с этой темой не вчера начал возиться. облазил гуглы, яндексы, шмандексы, все что смог найти - постарался внедрить, остальное найти не смог, да знать бы что искать уже..
Последний раз редактировалось Feex, 16.11.2019 в 16:09.
|
|
16.11.2019, 14:18
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Feex,
не копируйте сообщение целиком без необходимости, есть Цитата выделенного
|
|
16.11.2019, 14:28
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 94
|
|
|
Сообщение от рони
|
Feex,
не копируйте сообщение целиком без необходимости, есть Цитата выделенного
|
Приветствую вас.
Суть в том, что текст в поле должен быть скопирован (выделен) полностью, и удален полностью ИЛИ заменен на новый.
В случае выделения текста в поле и замены (ctrl+v) - всё работает.
В случае удаления из поля выделенного текста, а потом вставки нового текста - ничего не работает В примере это все легко увидеть, если запустить код. |
|
16.11.2019, 14:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от Feex
|
|
Суть в том,
|
не понимаю вашего сообщения. |
|
16.11.2019, 15:08
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 94
|
|
|
Сообщение от рони
|
|
не понимаю вашего сообщения.
|
запустите мой код.
Далее, скопируйте текст misc (или любой другой какой хотите)
выделите текст в поле ввода
нажмите ctrl+v - вставится ваш текст, который вы скопировали
можете нажать на полученную ссылку (необязательно) главное ПОЛУЧИТЬ ссылку.
Этот вариант работает как надо!!!
вариант 2:
запустите мой код.
Далее, скопируйте текст misc (или любой другой какой хотите)
выделите текст в поле ввода
удалите текст из поля ввода
нажмите ctrl+v - вставится ваш текст, который вы скопировали
И вот тут вы увидите косяк, о котором я и писал в первом посте.
А просьба состоит в том, чтобы устранить это косяк, чтобы во втором варианте действий пункт нажмите ctrl+v - вставится ваш текст, который вы скопировали отработал так же как и в первом варианте, т.е чтобы пр любых возможных действиях с полем ввода, получался нужный результат - это ссылка ниже, по которой можно кликнуть.
Есть же код-пример, который можно запустить, проверить всё,что я написал и увидеть в чем проблема получается. Я НЕ знаю как это решить, поэтому и пришел сюда.
Как еще это объяснить, я тоже не знаю.
|
|
16.11.2019, 15:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Feex,
пост #5 зачем там пост #4 полностью?
|
Сообщение от Feex
|
|
Как еще это объяснить, я тоже не знаю.
|
|
|
|
|
