<input type =“text”/>中的文字笔划

时间:2012-02-09 14:52:09

标签: jquery css input outline stroke

我想在<input type="text"/>中使用文字笔划,我需要它是跨浏览器(firefox,谷歌浏览器,safari,opera,IE7 +)。

有没有任何方法可以做到(CSS 2.1,jQuery ......)?

4 个答案:

答案 0 :(得分:4)

我相信他正在谈论css属性text-stroke(-webkit-text-stroke)。这仅在webkit浏览器中得到适当支持,因此在Internet Explorer中不会发生正确的实现。但是,您可以使用text-shadow can 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;" />

这种方法的唯一真正缺点是阴影只能是1px或者看起来很有趣,所以它不是text-stroke的完美复制。也就是说,您可能希望研究条件css,支持它的浏览器使用文本笔划,而其他浏览器使用这种hacky方法。

答案 1 :(得分:0)

我不确定你的意思,但我认为这就是你想要的 -

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

答案 2 :(得分:0)

由于模糊的问题,你有很多选择:

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

答案 3 :(得分:0)

使用jQuery,您可以执行以下操作:

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

这会将按键事件绑定到每个输入类型=文本。如果你想要一个特定的ID,用$(“#your_id”)替换$(“input [type ='text']。此外,还可以使用keydown和keyup事件来找出最适合你的内容。

相关问题