SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Create an unordered list in a textarea

    I have googled and searched, but can't find a way of creating an unordered list in a textarea, in a similar fashion to the function described here:

    http://www.sitepoint.com/forums/show...48#post2139348

    but with the prompt box for list items, like here at SP forums.

    Any help gratefully accepted.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A textarea only contains text, but you can insert newlines and tabs with the text to simulate a list. Make sure the css of the textarea includes white-space:pre (to preserve the whitespace).

    Code:
    listarray=['item1','item2','item3'];
    var who=document.getElementsByTagName('textarea')[0];
    var str='\n\t* '+listarray.join('\n\t* ')+'\n';
    who.value+=str;

  3. #3
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I don't think I explained that very well.

    I want to have a button that creates a list the same way as if doing it in these forum posts, so that it puts tags inside square brackets that I can use a php regular expression on to turn them into <ul><li>..</li></ul> tags and back again.

    The code in the thread I linked to inserted bold, italic, hr and a wink. I need one that makes an unordered list.

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure, if I understand you well. Anyway I had this on my old disc:
    Code CSS:
    <style type="text/css"><!--
    #ovladace{display:none;}
    --></style>
    Code JavaScript:
    <script type="text/javascript">
    var d=document;
    function tarea(startTag,endTag) {//based on [url]http://www.alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript/[/url]
    var txt=d.getElementById('txt');
    if(d.selection){//ie
    sel=d.selection.createRange();
    sel.text=startTag+sel.text+endTag;}
    else if(txt.selectionStart||txt.selectionStart=='0'){//gecko
    var zac=txt.selectionStart;
    var kon=txt.selectionEnd;
    txt.value=txt.value.substring(0,zac)
    +startTag
    +txt.value.substring(zac,kon)
    +endTag
    +txt.value.substring(kon,txt.value.length);
    txt.selectionStart=zac+startTag.length;
    txt.selectionEnd=kon+startTag.length;}
    else{txt.value+=myValue;}
    txt.focus();}
    function init(){
    var kde=d.getElementById('ovladace');
    kde.style.display='block';
    var hrefy=kde.getElementsByTagName('a');
    for(i=0,j=0;i<hrefy.length;i++){
    hrefy[i].onclick=function(){
    tarea('['+this.getAttribute('title')+']','[/'+this.getAttribute('title')+']');
    return false;}}}
    function addEvent(obj,evType,fn){
    if(obj.addEventListener){obj.addEventListener(evType,fn,true);return true;}
    else if(obj.attachEvent){var r=obj.attachEvent("on"+evType,fn);return r;}
    else{return false;}
    }
    addEvent(window,'load',init); //addEvent:thx [url]http://www.scottandrew.com/weblog/articles/cbs-events[/url]
    </script>
    Code HTML4Strict:
    <textarea id="txt"></textarea>
    <div id="ovladace">
    <a href="#" title="h1">h1</a>
    <a href="#" title="h2">h2</a>
    <a href="#" title="h3">h3</a>
    <a href="#" title="h4">h4</a>
    <a href="#" title="h5">h5</a>
    <a href="#" title="ul">ul</a>
    <a href="#" title="li">li</a>
    </div>

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Thane-Vashi, Mumbai, India
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where you want the round bullet to appear just insert the special characted resembling it. code for special character is &#9679

    Code "HTML:
    <textarea rows="6" cols="20">
    &#9679 Item1
    &#9679 Item2
    &#9679 Item3
    &#9679 Item4
    &#9679 Item5
    </textarea>

    Just try pasting the above code in HTML file and see if that is what you expect!
    Web developer: PHP-MySQL, JavaScript? http://www.w3hobbyist.com

  6. #6
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys. I got it sorted by amending the code in the post I referred to earlier.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •