Помогите решить проблему с 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, в который нельзя от руки прописать какие-либо символы, можно только вставить скопированный текст, после этого внизу отображается этот текст, который становится кликабельным, при нажатии открывается страница в новом окне. Текст - это "добавка" к основному адресу - в данном пример использовал адрес этого форума, а доп текст это разделы форума. Всё это работает кроме одного момента: если сначала удалить текст из поля ввода, а потом вставить нужный нам текст, то получается ерунда. А если не удалять текст из поля, а просто выделить его и заменить на нужный текст, то всё нормально получается. Я без понятия как исправить это... Если кто может это починить, т.е. чтобы и после очистки поля и вставки текста всё работало как и при выделении текста и замене на нужный текст, то вы меня выручите. |
Нужно по фокусу устанавливать курсор в конец определенного значения s. А очистка, это как, руками, кнопкой?
|
Цитата:
|
Не проще ли в таком случае очищать кнопкой? Следите за кареткой, вставили, выбрали очистить, значит опять установили каретку.
А можно и без этого, но тут с гибкостью не очень:
<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,
не копируйте сообщение целиком без необходимости, есть Цитата выделенного |
Цитата:
Суть в том, что текст в поле должен быть скопирован (выделен) полностью, и удален полностью ИЛИ заменен на новый. В случае выделения текста в поле и замены (ctrl+v) - всё работает. В случае удаления из поля выделенного текста, а потом вставки нового текста - ничего не работает В примере это все легко увидеть, если запустить код. |
Цитата:
|
Цитата:
Далее, скопируйте текст misc (или любой другой какой хотите) выделите текст в поле ввода нажмите ctrl+v - вставится ваш текст, который вы скопировали можете нажать на полученную ссылку (необязательно) главное ПОЛУЧИТЬ ссылку. Этот вариант работает как надо!!! вариант 2: запустите мой код. Далее, скопируйте текст misc (или любой другой какой хотите) выделите текст в поле ввода удалите текст из поля ввода нажмите ctrl+v - вставится ваш текст, который вы скопировали И вот тут вы увидите косяк, о котором я и писал в первом посте. А просьба состоит в том, чтобы устранить это косяк, чтобы во втором варианте действий пункт нажмите ctrl+v - вставится ваш текст, который вы скопировали отработал так же как и в первом варианте, т.е чтобы пр любых возможных действиях с полем ввода, получался нужный результат - это ссылка ниже, по которой можно кликнуть. Есть же код-пример, который можно запустить, проверить всё,что я написал и увидеть в чем проблема получается. Я НЕ знаю как это решить, поэтому и пришел сюда. Как еще это объяснить, я тоже не знаю. |
Feex,
пост #5 зачем там пост #4 полностью? Цитата:
|
| Часовой пояс GMT +3, время: 08:20. |