<!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, в который нельзя от руки прописать какие-либо символы, можно только вставить скопированный текст, после этого внизу отображается этот текст, который становится кликабельным, при нажатии открывается страница в новом окне.
Текст - это "добавка" к основному адресу - в данном пример использовал адрес этого форума, а доп текст это разделы форума.
Всё это работает кроме одного момента:
если сначала удалить текст из поля ввода, а потом вставить нужный нам текст, то получается ерунда.
А если не удалять текст из поля, а просто выделить его и заменить на нужный текст, то всё нормально получается.
Я без понятия как исправить это...
Если кто может это починить, т.е. чтобы и после очистки поля и вставки текста всё работало как и при выделении текста и замене на нужный текст, то вы меня выручите.