标签: placeholder

我记得在某处找到了一个教程,讲述了如何以更"可用"的方式设置输入表单的样式.

基本上,你有一个占位符值,当你输入输入时,它隐藏了提示.

现在,只是要明确:我不希望提示(占位符值文本)在焦点上消失,而是在我第一次开始输入内容时变得更轻松.很好的例子:

• 查看Aardvark上的表格.这正是我想要输入表单的方式.

• 我们自己的Stack Overflow - 当您尝试提问时,在任何输入表单内部单击时,它不会立即隐藏文本.您可以看到光标以及提示.但是当你开始输入时,它会隐藏提示.(我更喜欢让它变得更浅,而不是隐藏在一起,就像上面的Aardvark例子一样.)

我记得非常清楚地在interwebz上的某个地方阅读了这个具有这个确切要求的教程,但是很难忘,我忘了给它添加书签.

有什么建议/链接吗？

[更新:我最近发现了一个jQuery插件现场标签,它完全符合我的要求.此外,这里是改进同一插件的链接.]

我正在使用Twitter bootstrap CSS.您可以在下面看到相同的代码与FireFox和Chrome的显示方式有何不同.

这很奇怪.Firebug告诉我,占位符的css设置为浅灰色:

:-moz-placeholder {
    color: #999999;
}

这应该影响所有元素中的所有占位符,因为它在Chrome中正确完成.但在Firefox中为什么要textareas正确应用,但input不是吗？我怎样才能解决这个问题？

<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?">

<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea>

铬:

火狐:

更新:

以下评论给了我一个想法:

Input不同于划掉textarea的color: #9999条目,这意味着有些东西会覆盖它.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

事实上就是这样color: #555555;.当我在firebug中禁用它时,一切正常.Chrome怎么没关心这个,但Firefox呢？有关如何在两种浏览器中修复此问题的任 我还是css的新手.

我试图子类UITextField绘制自定义placehoder.在iOS 6这工作正常,但在iOS 7我有一个不同的CGRect高度.

该UITextField帧是(0, 0, 500, 45).我通过覆盖添加了20左边的填充 - (CGRect)editingRectForBounds:(CGRect)bounds;

- (CGRect)placeholderRectForBounds:(CGRect)bounds;

- (CGRect)textRectForBounds:(CGRect)bounds;

调用以下方法:

- (CGRect)makeRectFromBounds:(CGRect)bounds
              withTopPadding:(CGFloat)topPadding
              andLeftPadding:(CGFloat)leftPadding
{
    return UIEdgeInsetsInsetRect(bounds, UIEdgeInsetsMake(topPadding, leftPadding, 0, 0));

}

因为我想要一个不同的placeHolder文本颜色,我覆盖

- (void)drawPlaceholderInRect:(CGRect)rect

- (void)drawPlaceholderInRect:(CGRect)rect {

    [[UIColor colorWithRed:121.0/255.0
                     green:113.0/255.0
                      blue:107.0/255.0
                     alpha:1.0] setFill];

    [self printRect:rect from:__FUNCTION__];

    [[self placeholder] drawInRect:rect withFont:self.font];
}

我正在打印的矩形如下:

iOS 7: -Rect (X: 0.0, Y:0.0, W:480.0, H:44.0)

iOS 6: -Rect (X: 0.0, Y:0.0, W:480.0, H:26.0)

不知道这是一个错误还是我做错了什么？

阅读SO帖子" 用CSS更改输入的HTML5占位符颜色 "我想我理解如何使用外部CSS.

即使在搜索谷歌和搜索引擎优化后,我发现没有办法使这也适用于内联CSS(我知道应该避免使用内联CSS).

例如:

<input type="text" placeholder="Enter something" style="???" />

对于该???部分,我不知道输入什么以更改占位符文本的颜色.

所以我的问题是:

是否可以使用内联CSS来更改占位符文本的颜色？如果是的话,该怎么办？

我知道如何使用每个浏览器指定的伪类在浏览器中设置占位符文本/背景/字体大小等CSS的样式.但是我无法使用开发工具在浏览器中设置它们的样式,并且没有找到答案是否可能.

我喜欢使用占位符样式而不需要试错工作流程.

我有我的网站的移动版本,在登录页面上我使用"占位符"来显示:电子邮件或密码(而不是使用标签).

对于iPhone它是工作但不适用于Android,它禁用我的字段css(边框,颜色等...)

编辑: 我希望能够使用iPhone OS3,OS4和Android 1和2

为什么？

我需要测试占位符支持.以下适用于所有现代浏览器,以及IE7,IE8,IE9:

$.support.placeholder = (function () {
    var i = document.createElement("input");
    return "placeholder" in i;
}());

它有效,但JSLint抱怨使用in:

出乎意料的'在'.与undefined比较,或使用hasOwnProperty方法.

很好,所以我会重构它:

$.support.placeholder = (function () {
    var i = document.createElement("input");
    return i.hasOwnProperty("placeholder");
}());

现在这传递JSLint没有任何错误或警告,但它在IE7和IE8与这个旧板栗打破:

对象不支持属性或方法'hasOwnProperty'

任何想法如何使JSLint快乐,以及IE7和IE8？

我有一个输入标签,我正在尝试将占位符的内容设置为组件的道具.在编译JSX并在浏览器中运行它之后,占位符根本不显示.它也没有抛出任何错误.我怎样才能做到这一点？

<input type="text" onChange={this.props.handleChange} placeholder={this.props.name} />

使用响应式流体网格和图像为800px x 500px

问题:图像加载时,页脚在顶部,在图像加载时向下推.

设置:使用div为图像和div为页脚.

目标:让页脚始终保持在正确的位置,而不是试图将其置于绝对位置,只是想要考虑图像间距.

想法:也许在800x500使用透明的png,所以它在图像之前首先加载.

问题:创建一个800x500的div占位符可能不起作用,因为这些图像在流畅的网格中响应,所以除非观众有一个巨大的监视器,否则它们实际上永远不会达到那个大小.

加载图片时的最终结果:

目前的问题:

要加载图片的目标:

我想改变特定占位符的颜色.我正在为我的项目使用很多输入字段,问题是在某些部分我需要占位符的灰色,在某些部分我需要占位符的白色.我搜索了这个目的并找到了这个解决方案.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

但是这个代码是在所有输入占位符上实现的,我不需要所有输入占位符都是相同的颜色.所以任何人都可以帮助我.提前致谢.