Наваяла, не без помощи местной профессуры, такой скрипт для блогов. Вроде бы учтено всё: возможность изменения списка тэгов при редактировании темы, возможность добавления многословных тэгов, мгновенная индикация наличия тэга в поле.
Скрипт рабочий. За 6 дней на сайте открыто 137 тем - пока жалоб нет.
Поскольку являюсь новичком в яваскрипт, интересует насколько безграмотно написан код и как его можно довести до ума. С культурой кодирования не знакома, так что скобок и значочков, видимо, в избытке.
Отдельно: в большинстве руководств в инете указано, что cut и paste не поддерживаются Лисой, Хромом и Сафари. На самом деле только Опера в сторонке.
<html>
<head>
<style>
html, body, table, div, form, p, h1, h2, h3, h4, h5, pre, blockquote, ul, ol, li, dl, dt, dd, th, td, fieldset, legend img, abbr, cite {border: 0; font-style: normal; font-weight: normal; margin: 0; padding: 0}
/*кнопки*/
#spr {background:#5972A7 url(img/22.png)}
.light {height:20px; text-align:center; display: inline-block; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; margin-right: 12px; font-size:11px; cursor:pointer}
#spr.light {background: #ccc; border: 1px solid #999}
#spr.light:hover {color:#000}
.light input {color:#555; border:none; margin:2px; background:none; font-weight:900; cursor:pointer}
.light input:hover {color:#000}
/*===============*/
</style>
</head>
<body>
<div style=" margin: 40px">
<form method="post">
Tags: <input type="text" name="tags" id="tags" value="aaaaaaa, ccccccc, dddddddddddd" size="80" maxlength="80" /> <a href="javascript: add_tags('12')">Select</a><br>
<div id="invWin" style="background:#f4f4f4; width: 643px; border:3px solid #ccc; margin-left:300px; visibility:hidden; position:absolute; margin-left: 35px; margin-top: 4px; z-index:100">
<div style="background: #f4f4f4; margin-top: -32px; margin-right: -3px; width: 61px; padding: 2px 0 8px 0; text-align:center; border-right: 3px solid #ccc; border-top: 3px solid #ccc; border-left: 3px solid #ccc; float:right"><a href="javascript:hide()">Close</a></div>
<div id="att" style="display: none; background:#FFFF99; color:#000; position:absolute;cursor:pointer; border: 2px solid #FF0000; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; z-index: 110" onclick="none('att')">
<div class="but butl" style="float:left"></div><div class="but butr"><div style="padding: 8px 16px 6px 6px">Attention</div></div>
</div>
<input type="hidden" id="runtags2" value="first,aaaaaaa,bbbbbbbb,ccccccc,dddddddddddd,eeeeeeeee rrrrrrrrrr,fffffffffff"/>
<div id="runtags" style="padding: 8px" ></div>
<p style="border-top: 1px solid #ccc; padding:8px; text-align:right"><label id="spr" class="light"><input type="button" value="Close" onclick="hide()"/></label></p
</div>
</form>
</div>
<script>
var str = document.getElementById("tags");
var data;
//=========================================================
function add_tags(id){
if (document.getElementById("invWin").style.visibility=="visible") {
hide();
} else {
document.getElementById("invWin").style.visibility="visible";
}
//--------------------------------------------------------------------------------
/* JsHttpRequest.query('tags_backend.php?id='+id, {},
function(result, errors){*/
var massiv = '';
var check = '';
var string = str.value + ',';
// temporary insertion
var errors = 'first,aaaaaaa,bbbbbbbb,ccccccc,dddddddddddd,eeeeeeeee rrrrrrrrrr,fffffffffff,';
// end temporary
errors = errors.split(',');
for (var i = 0; i < errors.length-1; i++) {
if(string.match(errors[i]+',')) {
check = ' checked="checked"';
} else {
check = '';
}
massiv += '<input type="checkbox" id="'+errors[i]+'"'+check+' />'+ errors[i];
}
document.getElementById("runtags").innerHTML = massiv;
document.getElementById("runtags2").value = errors;
data = errors + ',';
data = data.split(',');
data.length = data.length - 1;
/* },
false // Отключить кэширование
);*/
}
//=======================================================
function none(c){
document.getElementById(c).style.display="none";
}
//=======================================================
function reex(a){
a = a.replace(/(,)/g, ', ');
a = a.replace(/[\s\t]{2,}/g, ' ');
a = a.replace(/ ,/g, ',');
a = a.replace(/[,]{2,}/g, ',');
a = a.replace(/(^, )|(, )$/g, '');
a = a.replace(/(^\s*)|(\s*)$/g, '');
/*str.value = str.value.replace(/[^\а-яА-ЯёЁa-zA-Z0-9,?!. -]/ig,"");*/
return a;
}
//=========================================
function hide(){
document.getElementById("invWin").style.visibility="hidden";
}
//===========================================
function uncheck(){
var string = ', ' + reex(str.value) + ',';
for (var i = 0; i < data.length; i++) {
if(string.match(', '+data[i]+',')) {
document.getElementById(data[i]).checked = true;
} else {
document.getElementById(data[i]).checked = false;
}
}
}
//======================================================
window.onload = function () {
//------------------------------------------------------
str.onpaste = str.oncut = function() {
setTimeout(function() {
uncheck();
}, 12)
}
//------------------------------------------------------
if (navigator.appName == "Opera"){
str.oninput = function() {
uncheck();
}
} else {
str.onkeyup = function() {
uncheck();
}
}
//------------------------------------------------------
document.getElementById("invWin").onclick = function (e) {
e = e || window.event;
var target = e.target || e.srcElement;
var tag = target.nextSibling.nodeValue;
var tag_e = ', ' + reex(str.value) + ', ';
if (target.checked){
if ((str.value.length + tag.length) < 80) {
none("att");
str.value = reex(str.value + ', ' + tag);
} else {
document.getElementById("att").style.display="inline-block";
target.checked = false;
}
} else {
if(tag_e.match(', ' + tag + ',')) {
str.value = tag_e.replace(', ' + tag + ', ', ', ');
str.value = reex(str.value);
}
if (str.value.length < 80 ){
none("att");
}
}
}
}
</script>
</body>
</html>
