Staram się osiągnąć coś takiego, jak Facebook robi, gdy wpiszesz @ w odpowiedzi. Po wybraniu przyjaciela nazwa tego przyjaciela jest podświetlona z niebieskym tłem, więc wiesz, że jest to oddzielny podmiot w tym tekście.

"Sprawdzam element", który texlai i nie ma div umieszczony na szczycie Textlai.

Czy ktoś może dać mi wskazówkę o tym, jak to się dzieje?

enter image description here

27
Nicu Surdu 9 grudzień 2011, 02:06

5 odpowiedzi

Najlepsza odpowiedź

Zobacz Ten przykład tutaj. Użyłem tylko CSS i HTML ... na teraz jest bardzo bardziej złożony. Nie wiem dokładnie, czego się spodziewasz.

HTML:

<div id="textback">
    <div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>

CSS:

#textarea {
    background: transparent;
    border: 1px #ddd solid;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 400px;
    height: 120px;
    font: 9pt Consolas;
}

#backmodel {
    position: absolute;
    top: 7px;
    left: 32px;
    background-color: #D8DFEA;
    width: 53px;
    height: 9pt;
}
18
David Rodrigues 8 grudzień 2011, 22:21

Mam zupełnie inne podejście do tego problemu za pomocą HTML5. Używam div za pomocą contentEditable="true" zamiast textlaya (wich, którego używałem, dopóki nie utknąłem z tym samym problemem, który miałeś).

Jeśli chcę zmienić kolor tła określonej części, właśnie włączyłem ten tekst za pomocą rozpiętości.

Nie jestem w 100% pewien, czy jest to właściwe podejście, jak jestem nowicjuszem w HTML5, ale działa dobrze we wszystkich przeglądarkach, które przetestowałem (Firefox 15.0.1, Chrome 22.0.1229.79 i IE8).

Mam nadzieję, że to pomoże

22
khr055 27 wrzesień 2012, 16:49

Textarea ma kolor - przezroczysty; Dodatkowy div, którego szukasz, jest za nim, z tym samym tekstem i czcionką jak Textlaea, ale różne kolory.

Krótki przykład ilustrujący punkt:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper     { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight   { background-color: #9ff; color: #9ff; }
textarea     { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>

Oczywiście nie aktualizuje specjalnego div, gdy wpisujesz do Textlay, potrzebujesz wielu JavaScript.

7
8 grudzień 2011, 22:30

Cześć, możesz sprawdzić tę jQuery Autosuggest wtyczkę podobną do Facebooka. Użyłem tego do osiągnięcia tej samej wymaganej funkcjonalności http://www.devthought.com/2008/01/12/ textboxlist-spełnia-autoceupełnianie /

3
Sohail Anwar 19 luty 2012, 19:00

Sugerowałbym zmianę tekstu, który chcesz przypisać tło inline do display: inline-block; background-color: #YOURCOLOR;. Powinno to zrobić dokładnie to, co chcesz zrobić bez wszystkich złożoności niektórych powyższych odpowiedzi.

Ostatecznie twój CSS powinien wyglądać w ten sposób:

.name {display: inline-block; background-color: purple;}

Następnie dodaj jakiś słuchacz zdarzeń w jQuery (nie jestem pewien, jak identyfikuje się, że jest to nazwa), a wewnątrz tego warunkowego:

$(yourNameSelectorGoesHere).addClass(".name");
-5
Jesse Atkinson 9 grudzień 2011, 03:49