Text stroke in <input type=“text”/>

Question

I want to use text stroke in <input type="text"/> and I need it to be cross-browser (firefox, google chrome, safari, opera, IE7+).

Is any there any method to do it (CSS 2.1, jQuery...)?

Answer 1

I believe he's speaking about the css property text-stroke (-webkit-text-stroke). This is only properly supported in webkit browsers, so no proper implementation can occur in, for instance, Internet Explorer. However, you can kind of fake it with text-shadow which can work in ie7+. if you MUST have it in ie. See http://css-tricks.com/adding-stroke-to-web-text/

It would look something like:

.stroke_text {
    color: white;
    text-shadow:
          -1px -1px 0 #000,
          1px -1px 0 #000,
          -1px 1px 0 #000,
          1px 1px 0 #000;
}

or for inline:

<input type='text' 
       style="color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; width:200px; font-size:20px;" />

The only real drawback of this approach is that the shadow can only be 1px or it starts to look funny, so it's not a perfect replication of text-stroke. That said, you might want to look into conditional css, where browsers that support it use text-stroke, and others use this hacky approach.

Answer 2

I'm not exactly sure what you mean, but I think this is what you want -

<input type="text" onkeyup="function_you_want_tocall()" />

Answer 3

Due to the vague question, you have many choices:

$('#myInput').change(function() { ... } ); // this will fire onblur if the text has changed
$('#myInput').keydown(function() { ... } ); // this will fire when a key is pressed down
$('#myInput').keyup(function() { ... } ); // this will fire when a key is released
$('#myInput').keypress(function() { ... } ); // this will fire when a printable key is pressed

Answer 4

Using jQuery you can do something like this:

$(document).ready(function() {
    $("input[type='text']").keypress(function() {
        // Your logc goes here
    });
});

This will bind a keypress event to every input type=text. If you want a specific ID, replace $("input[type='text'] with $("#your_id"). In addition, also play with keydown and keyup events to figure out what suits you most.