<input type = "text" />内のテキストストローク

Question

<input type="text"/>でテキストストロークを使用したいと思います。クロスブラウザ（Firefox、Google Chrome、Safari、Opera、IE7 +）にする必要があります。

これを行う方法はありますか（CSS 2.1、jQuery ...）？

Answer 1

私は彼がCSSのプロパティテキストストローク（-webkit-text-stroke）について語っていると信じています。これはWebkitブラウザでのみ適切にサポートされているため、Internet Explorerなどでは適切な実装はできません。text-shadowcan work in ie7+ 。あなたがIEでそれを持っていなければならない場合http://css-tricks.com/adding-stroke-to-web-text/

を参照してください。それは次のようになります。

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

またはインラインのために：このアプローチの

<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;" /> 

唯一の本当の欠点は、影が唯一の1ピクセルであるか、またはそれがtext-strokeの完璧な複製ではありませんので、面白い見て開始することです。つまり、それをサポートするブラウザがテキストストロークを使用する条件付きCSSを見たいと思うかもしれないし、他の人がこのハックなアプローチを使用しているかもしれません。

Answer 2

私はあなたが何を意味するか正確にわからないんだけど、私は、これはあなたが望むものだと思う -

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

Answer 3

により漠然と疑問に、あなたは多くの選択肢があります：jQueryのを使用して

$('#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

を

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

これは、すべての入力タイプ=テキストにキー入力イベントをバインドします。特定のIDが必要な場合は、$（ "＃your_id"）で$（ "input [type = 'text']を置き換えてください。また、keydownイベントとkeyupイベントで遊んで、あなたに最も適したものを見つけてください。