Wie markieren Sie Freunde in Facebook-status-update im Feld (textarea)?

In Facebook-status-update-box, wenn ich @ und beginnen Sie mit der Eingabe, und wählen Sie einen Namen, sagen wir, Steven Gerrard, aus der Freunde-Liste vorgeschlagen, durch fb, mein Freund der name hervorgehoben wird in die textarea wie diese

Ich habe mit Firebug und es gibt nur

ein div.der highlighter enthält Art formated text (Steven Gerrard ist innerhalb der b-tags)
eine textarea innerhalb einer div.uiTypeahead. Nichts Interessantes, die ich finden konnte
und eine versteckte Eingabe, enthält den eigentlichen text, der geschrieben wird: @[100001915747xxx:Steven Gerrard] ist genial

Was ist der geheime trick dahinter? Normale rich-text-Editoren wie ckeditor haben in der Regel ein iframe zur Anzeige der text-und einem tatsächlichen textarea, um die original-Inhalte. Aber in diesem Fall, ich sehe nichts. Bitte jemand vergossen ein paar Lichter?

Ich würde gerne etwas machen, aber haben keine Ahnung, wo zu beginnen. Auch, wenn ich möchte, dass die Anzeige eines kleinen Daumen neben meiner Freundin den Namen, ist es überhaupt möglich?

InformationsquelleAutor clu3 | 2011-09-21

Hier ist, wie es funktioniert:

Sie überlagern die textarea (vorne) und div (dahinter), die haben die gleiche Größe und die gleiche Schriftgröße.
Die textarea muss einen transparenten hintergrund haben, damit wir sehen können, seine Texte, aber auch den div dahinter.
Das div hinter sich haben, weißem text und weißen hintergrund, damit der text transparent sein wird.
Setzen Sie einen Haken bei der textarea ist keyup, und Bearbeiten Sie den text als HTML-Datei: ersetzen Sie die Zeilenumbrüche durch <br/>, ersetzen Sie die doppelten Leerzeichen durch   , und auch ersetzen Sie alle Wörter, die Sie hervorheben möchten, indem Sie eine version, umgeben von <span style="background-color: #D8DFEA;"></span>.
Da kann man sehen, das highlight div hinter der textarea, und dass der text der Höhepunkt div enthält, ist perfekt aufeinander abgestimmt mit dem text in der textarea, und das die <span> sichtbar ist, haben Sie die illusion, dass der text in der textarea markiert ist.

Ich geschrieben habe, ein Beispiel, basierend auf jquery, so dass Sie können es selbst ausprobieren, ohne allzu viel code zu analysieren.

Hier ist ein Beispiel-code können Sie einfach kopieren-einfügen-speichern und ausprobieren:

Dieser Beispielcode wird markieren Sie einen bestimmten Satz von Wort, hier: "Hallo" und "Welt".

Ich werde lassen Sie es anpassen, wie Sie wollen.

<html>
    <head>
        <title></title>
        <!-- Load jQuery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <!-- The javascript xontaining the plugin and the code to init the plugin -->
        <script type="text/javascript">
            $(function() {
                //let's init the plugin, that we called "highlight".
                //We will highlight the words "hello" and "world", 
                //and set the input area to a widht and height of 500 and 250 respectively.
                $("#container").highlight({
                    words:  ["hello","world"],
                    width:  500,
                    height: 250
                });
            });

            //the plugin that would do the trick
            (function($){
                $.fn.extend({
                    highlight: function() {
                        //the main class
                        var pluginClass = function() {};
                        //init the class
                        //Bootloader
                        pluginClass.prototype.__init = function (element) {
                            try {
                                this.element = element;
                            } catch (err) {
                                this.error(err);
                            }
                        };
                        //centralized error handler
                        pluginClass.prototype.error = function (e) {
                            //manage error and exceptions here
                            //console.info("error!",e);
                        };
                        //Centralized routing function
                        pluginClass.prototype.execute = function (fn, options) {
                            try {
                                options = $.extend({},options);
                                if (typeof(this[fn]) == "function") {
                                    var output = this[fn].apply(this, [options]);
                                } else {
                                    this.error("undefined_function");
                                }
                            } catch (err) {
                                this.error(err);
                            }
                        };
                        //**********************
                        //Plugin Class starts here
                        //**********************
                        //init the component
                        pluginClass.prototype.init = function (options) {
                            try {
                                //the element's reference ( $("#container") ) is stored into "this.element"
                                var scope                   = this;
                                this.options                = options;

                                //just find the different elements we'll need
                                this.highlighterContainer   = this.element.find('#highlighterContainer');
                                this.inputContainer         = this.element.find('#inputContainer');
                                this.textarea               = this.inputContainer.find('textarea');
                                this.highlighter            = this.highlighterContainer.find('#highlighter');

                                //apply the css
                                this.element.css('position','relative');

                                //place both the highlight container and the textarea container
                                //on the same coordonate to superpose them.
                                this.highlighterContainer.css({
                                    'position':         'absolute',
                                    'left':             '0',
                                    'top':              '0',
                                    'border':           '1px dashed #ff0000',
                                    'width':            this.options.width,
                                    'height':           this.options.height,
                                    'cursor':           'text'
                                });
                                this.inputContainer.css({
                                    'position':         'absolute',
                                    'left':             '0',
                                    'top':              '0',
                                    'border':           '1px solid #000000'
                                });
                                //now let's make sure the highlit div and the textarea will superpose,
                                //by applying the same font size and stuffs.
                                //the highlighter must have a white text so it will be invisible
                                this.highlighter.css({

                                    'padding':          '7px',
                                    'color':            '#eeeeee',
                                    'background-color': '#ffffff',
                                    'margin':           '0px',
                                    'font-size':        '11px',
                                    'font-family':      '"lucida grande",tahoma,verdana,arial,sans-serif'
                                });
                                //the textarea must have a transparent background so we can see the highlight div behind it
                                this.textarea.css({
                                    'background-color': 'transparent',
                                    'padding':          '5px',
                                    'margin':           '0px',
                                    'font-size':        '11px',
                                    'width':            this.options.width,
                                    'height':           this.options.height,
                                    'font-family':      '"lucida grande",tahoma,verdana,arial,sans-serif'
                                });

                                //apply the hooks
                                this.highlighterContainer.bind('click', function() {
                                    scope.textarea.focus();
                                });
                                this.textarea.bind('keyup', function() {
                                    //when we type in the textarea, 
                                    //we want the text to be processed and re-injected into the div behind it.
                                    scope.applyText($(this).val());
                                });
                            } catch (err) {
                                this.error(err);
                            }
                            return true;
                        };
                        pluginClass.prototype.applyText = function (text) {
                            try {
                                var scope                   = this;

                                //parse the text:
                                //replace all the line braks by <br/>, and all the double spaces by the html version &nbsp;
                                text = this.replaceAll(text,'\n','<br/>');
                                text = this.replaceAll(text,'  ','&nbsp;&nbsp;');

                                //replace the words by a highlighted version of the words
                                for (var i=0;i<this.options.words.length;i++) {
                                    text = this.replaceAll(text,this.options.words[i],'<span style="background-color: #D8DFEA;">'+this.options.words[i]+'</span>');
                                }

                                //re-inject the processed text into the div
                                this.highlighter.html(text);

                            } catch (err) {
                                this.error(err);
                            }
                            return true;
                        };
                        //"replace all" function
                        pluginClass.prototype.replaceAll = function(txt, replace, with_this) {
                            return txt.replace(new RegExp(replace, 'g'),with_this);
                        }

                        //don't worry about this part, it's just the required code for the plugin to hadle the methods and stuffs. Not relevant here.
                        //**********************
                        //process
                        var fn;
                        var options;
                        if (arguments.length == 0) {
                            fn = "init";
                            options = {};
                        } else if (arguments.length == 1 && typeof(arguments[0]) == 'object') {
                            fn = "init";
                            options = $.extend({},arguments[0]);
                        } else {
                            fn = arguments[0];
                            options = $.extend({},arguments[1]);
                        }

                        $.each(this, function(idx, item) {
                            //if the component is not yet existing, create it.
                            if ($(item).data('highlightPlugin') == null) {
                                $(item).data('highlightPlugin', new pluginClass());
                                $(item).data('highlightPlugin').__init($(item));
                            }
                            $(item).data('highlightPlugin').execute(fn, options);
                        });
                        return this;
                    }
                });

            })(jQuery);


        </script>
    </head>
    <body>

        <div id="container">
            <div id="highlighterContainer">
                <div id="highlighter">

                </div>
            </div>
            <div id="inputContainer">
                <textarea cols="30" rows="10">

                </textarea>
            </div>
        </div>

    </body>
</html>

Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben oder wenn Sie Hilfe benötigen mit diesem code.

Hallo Julien, vielen Dank, ich habe Ihnen das Kopfgeld. Ich bekomme nun die Idee. Das problem ist jetzt, wenn Sie die Größe des textarea, div, spielt nicht die Größe zusammen, so wird es eine Diskrepanz zwischen den 2 Schichten, Wenn Sie beheben könnte, dass in deinem code wäre es wunderbar. Ich muss irgendwann mit dem Studium deines Codes
Danke :)ich weiß nicht, was Methode, die Sie verwenden, um die Größe der textarea, aber das Prinzip gleich bleiben: Wann immer Sie die Größe des textarea, die Sie haben, um die Größe des div-hinter es, um die genaue Größe, also der text wird ausgerichtet bleiben.
Der text über das div nicht clip wie Sie den text in der textarea. Irgendwelche Ideen?
Zur info, @Julien L ist ordentlich code verwendet wurde als Basis für ein jQuery-plugin, das unterstützt Größenänderung, beide <textarea> und <input> Elemente und vieles mehr. Wenn plugins sind dein Ding, check it out: github.com/mistic100/jQuery-highlightTextarea

InformationsquelleAutor Julien L

2

Nach überprüfung der Art der von Facebook tun, sehe ich, dass der text auf dem Bildschirm angezeigt wird:
```
<span class="highlighterContent"><b>Ws Dev</b> is good</span>
```
Überspannen, ist in einer Tabelle (mit vielen div-container), die Stil entsprechend.

Also ich denke, dies ist der Prozess:
1. Wenn Sie in das Feld eingeben, Facebook hat eine textarea, die erfassen, was Sie geben, aber die javascript verwenden, um zu zeigen, das typisierte HTML-Inhalt in einer Tabelle.
2. Wenn Sie uns, die formatierte Inhalte in einem versteckten input (die Sie bereits vor Ort in der Frage) vorgelegt bekommen. Es ist wie "@[100001915747xxx:Steven Gerrard] ist genial".
3. Wenn die formatierte Nachricht senden, ist es in der Datenbank gespeichert. Jedesmal, wenn die Seite geladen wird, von der die gespeicherte Nachricht der HTML-Code zusammengesetzt und zurückgeben.
, Um die ähnliche Wirkung haben, Sie können jede jQuery autocomplete plugin.
- Dank Hoang Long, aber wie kann man die overlay-span über der Oberseite der textarea, und trotzdem macht die textarea so Aussehen, wie es bearbeitet wird?
- Ehrlich gesagt, ich glaube nicht, über Sie, bis der Lektüre Ihrer Frage. Ich habe getan, einige der Forschung und finden Sie die Lösung: setzen Sie die textarea-Komponente auf der Oberseite transparent. Sie können sich diese Frage: stackoverflow.com/questions/3282505/...
- Dank Haufen. das sieht genial aus. Ich gebe es zu gehen und sehen, wie sich herausstellt
InformationsquelleAutor Hoàng Long
1

Beispielcode mit dem beschriebenen Verfahren von Julien am: http://jsfiddle.net/SBBZm/

Wörter beginnen mit einem Großbuchstaben hervorgehoben sind die in der Beispiel.
- Funktioniert gut, bis Sie versuchen, und klicken Sie auf zurück zu einer früheren word Bearbeiten...
InformationsquelleAutor nacho

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.