البحث والإستبدال بواسطة javascript

[محمد الثقفي]

:deal:

<script type="text/javascript"> 
var firsttime = true;
function allowReset() {
    firsttime = true;
    return firsttime;
}
function tag(tag) { 
    var tags = document.getElementById('tags'); 
    var flag = false;
    var tags1 = tags.value.split(' ');
    if(firsttime){
        if(tags.value != ""){
            tags.value += " ";
            firsttime = false;
        }else{
            firsttime = false;
        }
    }
    for (i = 0; i < tags1.length; i++) { 
        if (tags1[i] == tag) { 
            flag = true;  
            break; 
        } 
    } 
    if (flag == true) {
        tags.value = tags.value.replace(tag + ' ', ''); 
    } else { 
        tags.value = tags.value + tag + ' '; 
    }
    setCursor(tags,55,55);
}

function setCursor(inputText,start,end) { 
    if(inputText.setSelectionRange) { 
        inputText.focus(); 
        inputText.setSelectionRange(start,end); 
    } else { 
        if(inputText.createTextRange) { 
            range=inputText.createTextRange(); 
            range.collapse(true); 
            range.moveEnd('character',end); 
            range.moveStart('character',start); 
            range.select(); 
    } 
  } 
}
</script> 

<form method="" action="" name="myForm" onReset="return allowReset()">
<div>
tags: 
<input type="text" name="tags" size="50" value="flash" /> 
<input type="reset" value="reset" /> 
<input type="submit" value="tag!" />
</div> 
<div>
site tags : 
<a href="javascript:tag('php')">php</a> 
<a href="javascript:tag('php-code')">php-code</a> 
<a href="javascript:tag('javascript')">javascript</a> 
<a href="javascript:tag('mysql')">mysql</a> 
<a href="javascript:tag('howto')">howto</a>
</div> 
</form> 

انتبه الى

<form method="" action="" name="myForm" onReset="return allowReset()">

يجب وضعها حتى نضع المسافه مره اخرى اذا تم الضغط على reset

الفكره فقط بتعريف global variable وقد اسميته firsttime

[dev11]

جميل جداً أستاذي ! لكن الحل ينقصه بعض الدقة ، ألا ترى أن إعادة كتابة القيم من جديد حل أفضل ؟ ، سأحاول في هذه المسألة في وقت لاحق ، أما الان فلدي إختبار علي أن أستعد له ، شكراً لك مرة أخرى .

سؤال آخر

 range.moveEnd('character',end); 

ما هي فائدة الوسيط character وما هي القيم الأخرى التي يمكن أن يحتويها ؟

[محمد الثقفي]

اذا رأيت خطأ في الحل اخبرني لاني عملت بعض التجارب وكلها نجحت

الوسيط character يستعمل مع الامر move و moveEnd و moveStart

character نضعه لكي نقوم بالتحريك حرف حرف

يمكنك ايضا استخدام

word
لتتحرك كلمه كلمه

يوجد ايضا sentence و textedit لكن لم اعرف بالضبط طريقة عملها

[dev11]

المسألة لا تتعلق بأول مرة .. بل بالتأكد من وجود مسافة في آخر القيمة إن وجدت ..

سوف نتأكد .. إذا كانت هناك مسافة بعد القيمة المسبقة فإننا نضيف الـ tag الجديد مباشرة ، أما إن لم تكن هناك مسافة فإننا نضيفها ثم نضيف الـ tag الجديد

في المثال التالي لا توجد مسافة في آخر القيمة

هل رأيت ماذا حصل ؟

[محمد الثقفي]

صحيح كلامك وهذا التعديل وهو افضل

    if(tags.value.charAt(tags.value.length-1) != " "){
        tags.value += " ";
    }

<script type="text/javascript">  
function tag(tag) {  
    var tags = document.getElementById('tags');  
    var flag = false; 
    var tags1 = tags.value.split(' '); 
    if(tags.value.charAt(tags.value.length-1) != " "){
        tags.value += " ";
    }
    for (i = 0; i < tags1.length; i++) {  
        if (tags1[i] == tag) {  
            flag = true;   
            break;  
        }  
    }  
    if (flag == true) { 
        tags.value = tags.value.replace(tag + ' ', '');  
    } else {  
        tags.value = tags.value + tag + ' ';  
    } 
    setCursor(tags,55,55); 
} 

function setCursor(inputText,start,end) {  
    if(inputText.setSelectionRange) {  
        inputText.focus();  
        inputText.setSelectionRange(start,end);  
    } else {  
        if(inputText.createTextRange) {  
            range=inputText.createTextRange();  
            range.collapse(true);  
            range.moveEnd('character',end);  
            range.moveStart('character',start);  
            range.select();  
    }  
  }  
} 
</script>  

<form method="" action="" name="myForm"> 
<div> 
tags:  
<input type="text" name="tags" size="50" value="flash" />  
<input type="reset" value="reset" />  
<input type="submit" value="tag!" /> 
</div>  
<div> 
site tags :  
<a href="javascript:tag('php')">php</a>  
<a href="javascript:tag('php-code')">php-code</a>  
<a href="javascript:tag('javascript')">javascript</a>  
<a href="javascript:tag('mysql')">mysql</a>  
<a href="javascript:tag('howto')">howto</a> 
</div>  
</form>

[dev11]

رائع ! أسأل الله لك دوام التوفيق ..

أضفت شرطاً بسيطاً ..

if (tags.value.charAt(tags.value.length-1) != ' ' && tags.value != '') { 

بقي هناك بعض البهارات على التطبيق ( إخفاء الـ tags ، حفظ خيار المستخدم بواسطة الـ cookies ) ، وهي جاهزة لدي ، لكن لايوجد لدي فراغ حالياً ، سأضيفها لاحقاً

شكراً لك أخي العزيز MohDesign

[dev11]

قد أضيف أيضاً :
- الإكمال التلقائي - ajax
- وسوم مقترحة ( تؤخذ من مجموعة الـ tags الموجودة ) طبعاً هذه تحتاج إلى ajax و php
- تظليل الـ tags الموجودة في مربع النص مثل del.icio.us

[dev11]

التطبيق بشكل كامل ، لاحظو معي والفرق بين الكود في أول رد والذي تطور ليصبح على هذا الشكل

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script type="text/javascript">
<!--
window.onload = function() {
    if (getCookie('display') == 'true') {
        display(true);
    } else {
        display(false);
    }
}
function tag(tag) {
    var tags = document.getElementById('tags');
    var flag = false;
    var tags1 = tags.value.split(' ');
    if (tags.value.charAt(tags.value.length - 1) != ' ' && tags.value != '') {
        tags.value += ' ';
    }
    for (var i = 0; i < tags1.length; i++) {
        if (tags1[i] == tag) {
            flag = true;
            break;
        }
    }
    if (flag == true) {
        tags.value = tags.value.replace(tag + ' ', '');
    } else {
        tags.value += tag + ' ';
    }
    setCursor(tags, tags.value.length, tags.value.length);
}
function setCursor(inputText, start, end) {
    if (inputText.setSelectionRange) {
        inputText.focus();
        inputText.setSelectionRange(start, end);
    } else {
        if (inputText.createTextRange) {
            range = inputText.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    }
}
function display(value) {
    var site_tags = document.getElementById('site_tags');
    var show_button = document.getElementById('show_button');
    var hide_button = document.getElementById('hide_button');
    if (value == true) {
        site_tags.style.display = '';
        show_button.style.display = 'none';
        hide_button.style.display = '';
    } else {
        site_tags.style.display = 'none';
        show_button.style.display = '';
        hide_button.style.display = 'none';
    }
    setCookie('display', value, 10);
}
function setCookie(name, value, years) {
    var date1 = new Date();
    var expires = new Date(date1.getYear() + years, date1.getMonth(), date1.getDate(), date1.getHours(), date1.getMinutes(), date1.getSeconds()).toGMTString();
    document.cookie = name + '=' + escape(value) + ';' + ((expires) ? ' expires=' + expires : '');
}
function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + '=';
    var begin = dc.indexOf('; ' + prefix);
    if (begin == - 1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) {
            return null;
        }
    } else {
        begin += 2;
    }
    var end = document.cookie.indexOf(';', begin);
    if (end == - 1) {
        end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
}
//-->
</script> 

<title>tags</title>

<form method="get" action="">
<div>tags: <input type="text" id="tags" name="tags" size="50" /> <input type="reset" value="reset" /> <input type="submit" value="send" /> <input type="button" value="hide tags" id="hide_button" onclick="display(false)" style="display: none;" /> <input type="button" value="show tags" id="show_button" onclick="display(true)" /></div> 
<div id="site_tags" style="display: none;">site tags : <a href="javascript:tag('php')">php</a> <a href="javascript:tag('php-code')">php-code</a> <a href="javascript:tag('javascript')">javascript</a> <a href="javascript:tag('mysql')">mysql</a> <a href="javascript:tag('howto')">howto</a></div> 
</form> 

أجدد شكري للأستاذ MohDesign .

أود سماع رأيكم في الطريقة التي قمت بإستخدام الـ cookies في هذا التطبيق .