Mając stałą wartość w polu wejściowym, wciąż będąc w stanie dodać do niej tekst

Question

Nie wiem, czy jest to możliwe, ale chciałbym mieć pole wejściowe, w którym miałbym wartość, która nie jest edytowalna przez użytkownik. Jednak nie chcę, aby pole wejściowe było "tylko do odczytu", ponieważ nadal chcę, aby użytkownik mógł dodawać tekst po wartości.

Jeśli masz pojęcie, jak to zrobić, daj mi znać, to bardzo mi pomoże.

EDYCJA: Używam formularzy html.

Answer 1

wydaje mi się trochę dziwne ... dlaczego nie wystarczy użyć tekstu, a potem pola wejściowego?

jak czasami wykorzystywane do urodzenia (już nie, chociaż, być może ..)

birthyear: 19[input field] 

edit:

z niektórych javascript rzeczy można zrealizować coś takiego prosiłeś, chociaż wejście pole z tekstem i przechwytywanie naciśnięć klawiszy w tym polu, pozwalając tylko niektórym po tym, co chcesz być zawsze tam - ale, cóż, musiałbyś użyć js .. i jeśli to tylko do tego, raczej powiem, że to nie jest konieczne

edycja:

Jeśli chcesz użyć sztuczki tylko dla widza, możesz użyć stylu tła/obramowania, który otacza tekst i pole wejściowe, dzięki czemu wygląda jak tekst, a dane wejściowe są takie same -pudełko.

Answer 2

Wygląda na to, że chcesz wstawić tekst zastępczy. W HTML5 możesz ustawić atrybut placeholder na dowolnym elemencie . To zadziała w nowoczesnych przeglądarkach.

<input type="email" placeholder="jappleseed@appletree.com" name="reg_email" /> 

Teraz dla starszych przeglądarek to nie zadziała. Będziesz potrzebować alternatywy JavaScript, aby zapewnić tę samą wartość UI.

To może działać na wszystkich przeglądarkach:

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"> 

ale nie jest to zalecane, ponieważ istnieje lepszy sposób (naprawdę, jest to kombinacja dwóch pierwszych podejściach): użycie HTML5 znaczników dla nowych przeglądarek; jQuery i modernizr dla starych przeglądarek. W ten sposób możesz mieć tylko jeden zestaw kodu, który będzie obsługiwał wszystkie przypadki użytkowników.

pobierane bezpośrednio z webdesignerwall.com:

<script src="jquery.js"></script> 
<script src="modernizr.js"></script> 

<script> 
$(document).ready(function(){ 

if(!Modernizr.input.placeholder){ 

    $('[placeholder]').focus(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
     input.removeClass('placeholder'); 
     } 
    }).blur(function() { 
     var input = $(this); 
     if (input.val() == '' || input.val() == input.attr('placeholder')) { 
     input.addClass('placeholder'); 
     input.val(input.attr('placeholder')); 
     } 
    }).blur(); 
    $('[placeholder]').parents('form').submit(function() { 
     $(this).find('[placeholder]').each(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
      input.val(''); 
     } 
     }) 
    }); 

} 

</script> 

[Musisz zarówno jquery.js i modernizr.js zainstalowane w tym samym folderze co strona internetowa.]

Uwaga: Mam wrażenie, że trochę więcej badań może ujawnić, że modernizator nie jest do tego wcale potrzebny, chociaż mógłbym się mylić w tej kwestii.

Answer 3

A może chcesz mieć menu select?

<select name="mySelectMenu"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
</select> 

Przepraszam, jeśli tego nie chcesz. Chwytam się słomek, bo to, o co prosisz, jest bardzo niejasne.Może powinieneś podać przykład tego, do którego z tych "edytowalnych, ale nie edytowalnych" danych wejściowych zostanie użyty.

Można również użyć wejścia selecti a text.

Answer 4

Głównym problemem jest określenie położenia kursora. Można to zrobić np. stosując następujące function:

function getCaret(el) { 
    var pos = -1; 
    if (el.selectionStart) { 
     pos = el.selectionStart; 
    } 
    else if (document.selection) { 
     el.focus();   
     var r = document.selection.createRange(); 
     if (r != null) { 
      var re = el.createTextRange(); 
      var rc = re.duplicate(); 
      re.moveToBookmark(r.getBookmark()); 
      rc.setEndPoint('EndToStart', re);  
      pos = rc.text.length; 
     } 
    } 
    return pos; 
} 

Teraz można zainstalować moduł obsługi zdarzeń dla kluczowych prasy i sprawdzić, czy wciśnięty klawisz był wewnątrz niezmiennej części wartości pola tekstowego. Jeśli tak było, procedura obsługi zdarzenia zwraca wartość false, w przeciwnym razie jest to prawda. Takie zachowanie może być opakowane w prosty obiektu:

function Input(id, immutableText) { 
    this.el = document.getElementById(id); 
    this.el.value = immutableText; 
    this.immutableText = immutableText; 
    this.el.onkeypress = keyPress(this); 
}  
function keyPress(el) { 
    return function() { 
     var self = el; 
     return getCaret(self.el) >= self.immutableText.length; 
    } 
}  
Input.prototype.getUserText = function() { 
    return this.el.value.substring(this.immutableText.length); 
}; 
var input = new Input("ta", "Enter your name: "); 
var userText = input.getUserText(); 

Można to sprawdzić na jsFiddle (używać przeglądarki Firefox lub Chrome).

Answer 5

Możesz umieścić tekst na górze pola wprowadzania, aby wyglądał tak, jakby znajdował się w środku. Coś takiego:

<input type="text" name="year" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">19</span> 

ten sposób Państwa pole wejściowe rozpocznie się z „19”, która nie może być edytowany, a użytkownik może dodać informacje za to.

Zasadniczo należy ustawić pole wejściowe na stałą szerokość, aby wiedzieć, ile marginesu ujemnego pozostało, aby nadać zakres z tekstem, aby można go było umieścić dokładnie na początku pole wejściowe.

Być może będziesz musiał skrzypce z marginesem po lewej stronie zakresu w zależności od reszty twojego css.

Następnie dodajemy również pedding - w lewo do pola wejściowego, aby upewnić się, że użytkownik zaczyna pisać po tekście, a nie pod nim.

czcionka: dziedziczenie powinno się upewnić, że zarówno tekst, jak i tekst wpisany przez użytkownika są w tej samej czcionce.

Jeśli chcesz wstawić cokolwiek na prawo od tego pola wejściowego, dodaj margines do prawej strony zakresu z tekstem, ponieważ w przeciwnym razie może również zostać uruchomiona inna treść nad polem wprowadzania.