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

morsrh · 26-04-11, 19:02

אהלן ,

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

HTML קוד:

function addSmiley(){
	    document.getElementById('ID').value = document.getElementById('ID').value+":)";
	}

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

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

תודה מור.

**IgalSt** · 26-04-11, 20:41

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

morsrh · 26-04-11, 21:28

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

morsrh · 27-04-11, 14:44

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

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

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

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 זה פשוט מוחק אותו

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

תודה , מור.

BlueNosE · 27-04-11, 15:54

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

קוד:

		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, פה לקחתי את זה כחלק מאובייקט, צריך לשכתב.

morsrh · 27-04-11, 17:05

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

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

ציטוט:

נכתב במקור על ידי IXCESE

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

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

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

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 זה פשוט מוחק אותו

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

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

morsrh · 27-04-11, 19:13

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

http://jsbin.com/axace5

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

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

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

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

**IgalSt** · 27-04-11, 21:04

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

morsrh · 27-04-11, 21:04

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

BlueNosE · 27-04-11, 21:26

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

26-04-11, 19:02	# 1
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	הוספת טקסט לקופסת תגובה אהלן , אני רוצה לעשות שיהיה אפשר להוסים סמיליים לTEXTAREA אז יצא ככה : HTML קוד: function addSmiley(){ document.getElementById('ID').value = document.getElementById('ID').value+":)"; } אבל הבעיה היא שאם נגיד המשתמש רוצה להכניס את הסמיילי באמצע טקסט שהוא קטב זה לא עובד השאלה שלי היא איך אפשר לקבל את המיקום של המצביע בתוך הטקסט ואז להכניס לשם את הסמיילי , תודה מור.

26-04-11, 20:41	# 2
IgalSt מנהל פורום, עסק רשום מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: המרכז גיל: 38 הודעות: 1,432	נראה לי שפה יש דוגמה למה שאתה מחפש __________________ יגאל סטקלוב Igal Steklov Slides מה השעה? טרקלין דן טרמינל 1

27-04-11, 21:04	# 8
IgalSt מנהל פורום, עסק רשום מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: המרכז גיל: 38 הודעות: 1,432	הוספתי return false לארוע onclick. כפתור מסוג תמונה הוא כמו כפתור submit = מבצע משלוח של הטופס. ה-return false מונע ממנו לעשות את זה. דוגמה __________________ יגאל סטקלוב Igal Steklov Slides מה השעה? טרקלין דן טרמינל 1

27-04-11, 21:26	# 10
BlueNosE אין כמו ב127.0.0.1 מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: כפ"ס גיל: 32 הודעות: 4,086	ככלל (בגלל הסמנטיקה של הHTML), עדיף שתשתמש בתמונה עם onclick או בתמונה עם לינק עליה, מאשר בIMAGE כאשר לא מדובר בSUBMIT. __________________ עומר, admin [@] rely.co.il בניית אתרים Rely סלנג מילון סלנג utter


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

26-04-11, 21:28	# 3
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	רק זה ככה לבד בתוך הבודי

27-04-11, 19:13	# 7
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	לנוחות יש פה את קוד המקור http://jsbin.com/axace5 ופה העריכה : sbin.com/enudo4 שוב , מה ששיניתי נמצא רק בFORM שמתי לב שהבעיה היא שלאחר השינוי הוא עושה איכשהוא ריענון אשמח לעזרה , תודה.

27-04-11, 21:04	# 9
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	אחלה , מאוד עזר לי תודה.

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)