Poprawianie pola wprowadzania znaków na tekst za pomocą javascript / jquery

Szukam sposobu na 'poprawienie' symbolu dolara $ do pola tekstowego, np <input type="text" value="$" /> ale uniemożliwienie usunięcia domyślnej wartości, tak aby niezależnie od tego, co wprowadzi użytkownik, zawsze będzie symbol $ 'prepending'.

Cheers

Author: Eddie, 2010-02-08
Source

5 answers

Istnieje możliwość background-image, ale jest to trudne do utrzymania i nie reaguje na zmiany rozmiaru czcionki, co czyni go mniej optymalnym wyborem IMO.

Lepszym sposobem w moim opinion byłoby:

  • Umieść <span>$</span> obok wejścia (właściwie przed nim).

  • Daj to position: relative; left: 20px.

  • Znak $ przechodzi następnie do pola wprowadzania.

  • Następnie podaj pole wejściowe padding-left: 24px.

  • Voilá! Znak $ znajduje się na wejściu Pole, nie zasłania niczego i nie można go usunąć.

 39
Author: Pekka 웃,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-07 21:33:43

Rozszerzając odpowiedź Pekki, użyłem tego na swojej stronie, ale zautomatyzowałem ją trochę za pomocą jQuery. Więc dla tego przykładu, wszystkie pola wejściowe, które chcę umieścić symbol$, daję im klasę "koszt".

CSS: 

<style type=&quot;text/css&quot; media="screen">
.cost{
    position: relative;
    left: 20px;
}
input.cost{
    padding-left: 24px;
}
</style>

JQuery: 

<script type="text/javascript">
$(document).ready(function(){    
    $("#lcce form input.cost").wrap('<div class=&quot;cost">');
    $("#lcce form input.cost").before('<span class="cost"></span>');
});
</script/>

Spowoduje to umieszczenie span z klasą "cost" tuż przed wejściem, a także owinięcie div wokół wejścia i zakresu, dzięki czemu są one zapewnione, aby znajdowały się na tej samej linii.

Jeśli nie masz jQuery, możesz it from: jQuery.com

Teraz mam szybkie pytanie-zauważyłem, że przy tej stylizacji,w IE6, 7 i 8, symbol $ nie jest ustawiony poprawnie. Czy ktoś ma coś na to?

Dziękuję!
 4
Author: Aaron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-01 21:27:16

Czy to tylko efekt wizualny? Jeśli tak, możesz zastosować CSS jako obraz tła na wejściu.

Następnie, na serwerze, możesz zrobić co chcesz z wartością (np. prepend IT z$).

 0
Author: cherouvim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-07 21:34:13

Ja również patrzyłem na różne rozwiązania tego problemu. Użycie css do wcięć tekstu z wypełnieniem i umieszczenie obrazu tła w tej pozycji jest najlepszym rozwiązaniem.

 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-08 22:39:21

Zrobiłem to tak: 

$('#price').keypress(function(event) {
var code = (event.keyCode ? event.keyCode : event.which);
if ($(this).val().indexOf('$') === -1){
    document.getElementById("price").value = "$" + $(this).val();
  } else {
    document.getElementById("price").value = $(this).val();
  }  
});

Z <input type="text" id="price">.

Użytkownik może usunąć znak dolara ręcznie, jeśli chce.

 0
Author: Engin Yapici,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-14 02:04:34