הוסטס - פורום אחסון האתרים הגדול בישראל

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - הוספת טקסט לקופסת תגובה (https://hosts.co.il/forums/showthread.php?t=89235)

הוספת טקסט לקופסת תגובה

אהלן ,

אני רוצה לעשות שיהיה אפשר להוסים סמיליים לTEXTAREA אז יצא ככה :

HTML קוד:

function addSmiley(){

            document.getElementById('ID').value = document.getElementById('ID').value+":)";

        }

אבל הבעיה היא שאם נגיד המשתמש רוצה להכניס את הסמיילי באמצע טקסט שהוא קטב זה לא עובד

השאלה שלי היא איך אפשר לקבל את המיקום של המצביע בתוך הטקסט ואז להכניס לשם את הסמיילי ,

תודה מור.

רק זה ככה לבד בתוך הבודי

תודה רבה יגאל , נחמד שאתה תמיד עוזר :-)

מה שהבאת לי היה מצויין וזה בדיוק מה שחיפשתי רק שעשיתי לזה שינוי קטן אז זה לא כל כך עובד משום סיבה ,

זה הקוד האורגינל :

HTML קוד:

z<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

        <title>Extended functionaly for textelements</title>

        <script type="text/javascript">

                function insertAtCaret(obj, text) { 

            if(document.selection) {

                obj.focus(); 

                var orig = obj.value.replace(/\r\n/g, "\n"); 

                var range = document.selection.createRange(); 

         

                if(range.parentElement() != obj) { 

            return false; 

        } 

         

                range.text = text; 

                 

        var actual = tmp = obj.value.replace(/\r\n/g, "\n"); 

         

                for(var diff = 0; diff < orig.length; diff++) { 

                    if(orig.charAt(diff) != actual.charAt(diff)) break; 

                } 

         

                for(var index = 0, start = 0;                   

                        tmp.match(text)  

                        && (tmp = tmp.replace(text, ""))  

                        && index <= diff;  

                    index = start + text.length 

                ) { 

                        start = actual.indexOf(text, index); 

                } 

            } else if(obj.selectionStart) { 

                var start = obj.selectionStart; 

                var end   = obj.selectionEnd; 

         

                obj.value = obj.value.substr(0, start)  

                    + text  

                    + obj.value.substr(end, obj.value.length); 

            } 

             

            if(start != null) { 

                setCaretTo(obj, start + text.length); 

            } else { 

                obj.value += text; 

            } 

        } 

         

        function setCaretTo(obj, pos) { 

            if(obj.createTextRange) { 

                var range = obj.createTextRange(); 

                range.move('character', pos); 

                range.select(); 

            } else if(obj.selectionStart) { 

                obj.focus(); 

                obj.setSelectionRange(pos, pos); 

            } 

        } 

        </script>

</head>

<body>

        <form name="form">

                <input type="button" value="Insert text" onclick="insertAtCaret(this.form.text, this.form.string.value)">

                <input type="text" name="string"><br />                

                <textarea name="text" cols="60" rows="10"></textarea>

        </form>

</body>

</html>

וזה מש ששיניתי ממנו :

HTML קוד:

<form name="form">

                <input type="image" src="images/icons/smiley.png" onclick="insertAtCaret(this.form.textInput, this.form.smiley.value)">

                <input type="hidden" name="smiley" value="*smiley*"><br />                

                <textarea name="textInput" cols="60" rows="10"></textarea>

        </form>

בתכלס שיניתי שזה לא יקבל קלט מINPUT TEXT אלה מ input מוחבא ע"י לחיצה על input מסוג תמונה
זה עושה את העבודה אבל יש באג מוזר שאחרי שזה מוסיף את הטקסט שיש בתוך ה HIDDEN זה פשוט מוחק אותו

אם אתה רוצה לבדוק את פשוט תשים קישור תמונה אמיתי ותנסה ותראה מה הבעיה

תודה , מור.

מה המטרה בדיוק? יצרתי קוד זהה לזה לפני כמה זמן בלי להסתבך ככה, אולי תרצה להשתמש בו.

קוד:

                insertContent : function(content,eID) {

                   var txtarea = document.getElementById(eID);

                        var strPos = 0;

                        var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 

                                "ff" : (document.selection ? "ie" : false ) );

                        if (br == "ie") { 

                                txtarea.focus();

                                var range = document.selection.createRange();

                                range.moveStart ('character', -txtarea.value.length);

                                strPos = range.text.length;

                        }

                        else if (br == "ff") strPos = txtarea.selectionStart;

                

                        var front = (txtarea.value).substring(0,strPos);  

                        var back = (txtarea.value).substring(strPos,txtarea.value.length); 

                        txtarea.value=front+content+back;

                        strPos = strPos + content.length;

                        if (br == "ie") { 

                                txtarea.focus();

                                var range = document.selection.createRange();

                                range.moveStart ('character', -txtarea.value.length);

                                range.moveStart ('character', strPos);

                                range.moveEnd ('character', 0);

                                range.select();

                        }

                        else if (br == "ff") {

                                txtarea.selectionStart = strPos;

                                txtarea.selectionEnd = strPos;

                                txtarea.focus();

                        }

                        

                        return false;

                }

תעביר בcontent את התוכן וeID את הID של האלמנט

ביקשת דוגמא:

קוד:

<a href='javascript:;' onclick='insertContent(":smile:","inputID");'><img ... /></a>

<input id='inputID' type='text' />

בהנחה ששם הפונקציה הוא insertContent, פה לקחתי את זה כחלק מאובייקט, צריך לשכתב.

תודה עומר אבל זה לא בדיוק מה שאני מחפש ,
הקוד שהבאתי למעלה מחליף גם מה שמסומן אם מסומן וזה כעיקרון חלק ממה שאני מחפש אבל תודה בכל מקרה.

אני עדיין לא מבין מה הבעיה פה :

ציטוט:

נכתב במקור על ידי IXCESE (פרסם 802657)

HTML קוד:

z<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

        <title>Extended functionaly for textelements</title>

        <script type="text/javascript">

                function insertAtCaret(obj, text) { 

            if(document.selection) {

                obj.focus(); 

                var orig = obj.value.replace(/\r\n/g, "\n"); 

                var range = document.selection.createRange(); 

         

                if(range.parentElement() != obj) { 

            return false; 

        } 

         

                range.text = text; 

                 

        var actual = tmp = obj.value.replace(/\r\n/g, "\n"); 

         

                for(var diff = 0; diff < orig.length; diff++) { 

                    if(orig.charAt(diff) != actual.charAt(diff)) break; 

                } 

         

                for(var index = 0, start = 0;                   

                        tmp.match(text)  

                        && (tmp = tmp.replace(text, ""))  

                        && index <= diff;  

                    index = start + text.length 

                ) { 

                        start = actual.indexOf(text, index); 

                } 

            } else if(obj.selectionStart) { 

                var start = obj.selectionStart; 

                var end   = obj.selectionEnd; 

         

                obj.value = obj.value.substr(0, start)  

                    + text  

                    + obj.value.substr(end, obj.value.length); 

            } 

             

            if(start != null) { 

                setCaretTo(obj, start + text.length); 

            } else { 

                obj.value += text; 

            } 

        } 

         

        function setCaretTo(obj, pos) { 

            if(obj.createTextRange) { 

                var range = obj.createTextRange(); 

                range.move('character', pos); 

                range.select(); 

            } else if(obj.selectionStart) { 

                obj.focus(); 

                obj.setSelectionRange(pos, pos); 

            } 

        } 

        </script>

</head>

<body>

        <form name="form">

                <input type="button" value="Insert text" onclick="insertAtCaret(this.form.text, this.form.string.value)">

                <input type="text" name="string"><br />                

                <textarea name="text" cols="60" rows="10"></textarea>

        </form>

</body>

</html>

וזה מש ששיניתי ממנו :

HTML קוד:

<form name="form">

                <input type="image" src="images/icons/smiley.png" onclick="insertAtCaret(this.form.textInput, this.form.smiley.value)">

                <input type="hidden" name="smiley" value="*smiley*"><br />                

                <textarea name="textInput" cols="60" rows="10"></textarea>

        </form>

אשמח לעזרה תודה

לנוחות יש פה את קוד המקור

http://jsbin.com/axace5

ופה העריכה :
sbin.com/enudo4

שוב , מה ששיניתי נמצא רק בFORM

שמתי לב שהבעיה היא שלאחר השינוי הוא עושה איכשהוא ריענון

אשמח לעזרה , תודה.

הוספתי return false לארוע onclick.
כפתור מסוג תמונה הוא כמו כפתור submit = מבצע משלוח של הטופס.
ה-return false מונע ממנו לעשות את זה.
דוגמה

אחלה , מאוד עזר לי
תודה.

ככלל (בגלל הסמנטיקה של הHTML), עדיף שתשתמש בתמונה עם onclick או בתמונה עם לינק עליה, מאשר בIMAGE כאשר לא מדובר בSUBMIT.