Thank you to anyone who has already donated - your generous donations helped make three months of treatment possible.

My brother Nate continues to fight stage IV Hodgkin's lymphoma. He's just 31, with a wife and baby girl. They have no active income (since he's been unable to return to work), no insurance, and cannot afford the treatment he needs. Nate and his family need your help. Please consider a donation, every dollar helps. Thanks.

Read Nate's story Support Nate by buying an official Pastie t-shirt Hide this message

Document@2x
|
Chain_link@2x
|
Arrow_down@2x
|
Spiral_paper@2x
A A A

Javascript       Report abuse 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset=utf-8 />
        <title>ContentEditable</title>
        <style>
            .augmentedWord{
                /*background-color:rgba(50,50,50,0.2);*/
                padding-left:4px;
                margin-left:-4px;

                padding-right:4px;
                margin-right:-4px;

                padding-top:1px;
                padding-bottom:8px;
                margin-top:1px;

                outline:2px solid gray;
                border-bottom:20px solid gray;
            }
            
            #outputWrapper{
                position:absolute;
                top:60px;
                left:30px;
                height:14px;
                width: 300px;
                border: 2px solid transparent;
                padding:3px 10px 12px 20px;
            }
            
            #outputWrapper, #inputWrapper, #query{word-spacing:2em;}
            
        </style>
    </head>
    
    <body>


        <div id="outputWrapper">
            <p id="output" contenteditable="true">
                Text here
            </p> 
        </div>



        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <script>
            var output   = document.getElementById("output");
            var savedRange;
            
            
            output.addEventListener('keyup',augmentInput,false);
            output.addEventListener('keydown',saveCursorPos,false);
            output.addEventListener('mousedown',saveCursorPos,false);
            output.addEventListener('keyup',restoreCursorPos,false);
            
            //var event;
            
            function saveCursorPos(e){
                //var selection = window.getSelection();
                savedRange = window.getSelection().getRangeAt(0);
                console.log("save "+e.type,savedRange);
            }
            
            function restoreCursorPos(e){
            document.getElementById("output").focus();

                if (savedRange != null) {
                    var s = window.getSelection();

                    if (s.rangeCount > 0){
                        s.removeAllRanges();
                    }

                    s.addRange(savedRange);
                    console.log("range !=0 "+e.type, savedRange);
                }
                
                else {
                    window.getSelection().addRange(savedRange);
                    console.log("range ==0 "+e.type, savedRange);
                }
            }
            
            function augmentInput(e){
                //hinter dem curson muss immer ein </span> stehen
                //vor einer buchstabenkette immer ein <span>
                //vor einem Leerzeichen immer ein </span>
                var text=$(output).text(); //var text=$(editable).text();
                //console.log(text);
                var textArray=text.split(" ");
                var regExJustWhitespace=new RegExp("^(\s|&nbsp;)*?$");

                output.innerHTML="";
	
                for(var i=0; i<textArray.length; i++){
                    var span = document.createElement('span');
                    var spanEmpty = document.createElement('span');
		
                    span.appendChild(document.createTextNode(textArray[i])); //span.appendChild(document.createTextNode(textArray[i]+" "));
                    spanEmpty.appendChild(document.createTextNode(" ")); //Leerzeichen einhängen
		
                    if(!(/^(\s)*?$/.test(span.firstChild.nodeValue))){ // /^(\s|&nbsp;)*?$  
                        //Testen, ob der span node textihnalt hat. Wenn ja: augmented-word-klasse.
                        span.className="augmentedWord";
                        //span.addEventListener('click',handleWord,false);
                    }
		
		
                    output.appendChild(span);
                    output.appendChild(spanEmpty);                    
                }
                
                 var hi={};
                 hi.type="just called";
                 restoreCursorPos(hi);
            }


        </script>
    </body>
</html>