Textbox με κώδικα

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Textbox με κώδικα

Δημοσίευση από EneMe » 12 Νοέμ 2009 19:34

Έχω κολλήσει εδώ και 1 ώρα και δεν μπορώ να βρω λύση!

Θέλω να δίνω κάποιον html κώδικα στους επισκέπτες μου, ώστε να μπορούν να τον αντιγράψουν, σαν να ήταν κείμενο.

Με textbox δεν το κάναμε αυτό από παλιά; Πώς;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Textbox με κώδικα

Δημοσίευση από dimsis » 12 Νοέμ 2009 20:19

<textarea>keimeno</textarea>

αλλά μπορείς να τον δείχνεις και με <code>Κώδικας</code> μέσα σε ένα div και να τους βάλεις ένα javascript copy link.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Textbox με κώδικα

Δημοσίευση από fafos » 12 Νοέμ 2009 20:28

EneMe έγραψε:Έχω κολλήσει εδώ και 1 ώρα και δεν μπορώ να βρω λύση!

Θέλω να δίνω κάποιον html κώδικα στους επισκέπτες μου, ώστε να μπορούν να τον αντιγράψουν, σαν να ήταν κείμενο.

Με textbox δεν το κάναμε αυτό από παλιά; Πώς;
h textarea den dexete kapoious xarakthres html kai prepei na tous kaneis encode (p.x. < > klp)...

an o kodikas einai megalos mporeis na ton kaneis encode me auto to online ergaleio: http://www.opinionatedgeek.com/dotnet/t ... ncode.aspx

meta vazeis ton kodika mesa sto textarea opos edo:

Κώδικας: Επιλογή όλων

<textarea rows="7" cols="44" name="test">


&lt;table width=&quot;300&quot; height=&quot;100&quot; cellpadding=&quot;3&quot; cellspacing=&quot;3&quot; style=&quot;border-width &#58; 1px 1px 1px 1px;border-style &#58; solid solid solid solid;border-color &#58; green green green green;&quot;&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;&lt;b&gt;fafos&lt;/b&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot;&gt;pouli apodhmhtiko &lt;font color=&quot;#cc0000&quot;&gt;metriou&lt;/font&gt; megethous kai nohmosynhs...&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;


</textarea>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Textbox με κώδικα

Δημοσίευση από EneMe » 12 Νοέμ 2009 23:33

Ευχαριστωωωωω!!!

dimsis, για πες λίγο για το <code> και το javascript, δεν κατάλαβα...

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Textbox με κώδικα

Δημοσίευση από dimsis » 13 Νοέμ 2009 09:46

Ένα παράδειγμα στα γρήγορα:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<title>Επιλογή κώδικα από code ή pre block - select code from code or pre block</title>
<style>
code, pre &#123;
	display&#58;block;
	font-family&#58;Sans-serif, Verdana, Arial, Helvetica;
	font-size&#58;13px;
	overflow&#58;auto;
	background&#58;#fff;
	border&#58;1px solid #ccc;
	color&#58;#222;
	padding&#58;4px;
&#125;
</style>
<SCRIPT LANGUAGE="JavaScript">
function selectCode&#40;a&#41;
&#123;
   // Get ID of code block
   var e = a.parentNode.parentNode.getElementsByTagName&#40;'PRE'&#41;&#91;0&#93;; // εδώ βάλε CODE αντί για PRE αν χρησιμοποιήσεις το CODE tag

   // Not IE
   if &#40;window.getSelection&#41;
   &#123;
      var s = window.getSelection&#40;&#41;;
      // Safari
      if &#40;s.setBaseAndExtent&#41;
      &#123;
         s.setBaseAndExtent&#40;e, 0, e, e.innerText.length - 1&#41;;
      &#125;
      // Firefox and Opera
      else
      &#123;
         var r = document.createRange&#40;&#41;;
         r.selectNodeContents&#40;e&#41;;
         s.removeAllRanges&#40;&#41;;
         s.addRange&#40;r&#41;;
      &#125;
   &#125;
   // Some older browsers
   else if &#40;document.getSelection&#41;
   &#123;
      var s = document.getSelection&#40;&#41;;
      var r = document.createRange&#40;&#41;;
      r.selectNodeContents&#40;e&#41;;
      s.removeAllRanges&#40;&#41;;
      s.addRange&#40;r&#41;;
   &#125;
   // IE
   else if &#40;document.selection&#41;
   &#123;
      var r = document.body.createTextRange&#40;&#41;;
      r.moveToElementText&#40;e&#41;;
      r.select&#40;&#41;;
	  r.execCommand&#40;"Copy"&#41;
   &#125;
&#125;

</script>
</head>
<body>
<pre>
&lt;html>
&lt;head>
&lt;title>Ένα απλό παράδειγμα&lt;/title>
&lt;/head>
&lt;body>
&lt;h1>Η εκμάθηση της HTML &lt;/h1>
&lt;p> Καλωσήλθατε στον κόσμο της HTML.
  Αυτή είναι η πρώτη παράγραφος. &lt;/p>
&lt;p> Και αυτή είναι η δεύτερη παράγραφος.&lt;/p>
&lt;/body>
&lt;/html>
</pre>
<a onclick="selectCode&#40;this&#41;; return false;" href="#">Επέλεξε τον κώδικα</a>
</body>
</html>
Demo: http://avadaz.com/playground/copy_select.htm

Τον κώδικα που θέλεις να δείχνεις μέσα στο textarea ώστε να τον αντιγράφουν οι επισκέπτες σου, αφού μετατρέψεις σε &lt; &gt; τα μικρότερο και μεγαλύτερο, αντί για textarea μπορείς να χρησιμοποιήσεις τα HTML tags: CODE ή PRE

Στο παράδειγμα σου το έβαλα με PRE για να γλιτώσω τα <br/> που θα έπρεπε να βάλω στο τέλος της κάθε γραμμής αν χρησιμοποιούσα την CODE.
Σε Internet Explorer μαρκάρει το κείμενο που βρίσκετε μέσα στο PRE tag και το αντιγράφει στο clipboard, στον Firefox απαγορεύεται εδώ και κάποιες versions για λόγους ασφαλείας η αντιγραφή στον clipboard οπότε μόνο μαρκάρει το κείμενο...
Ρίξε μια ματιά και αν δεν το καταλάβεις πες μου.

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες