标签: placeholder

最近我一直在研究jquery/javascript解决方案来模拟placeholder属性,但它们似乎都没有.常见问题是:

• 首先不使用本机浏览器支持
• 表单实际上可以发布占位符文本的值
• 如果值相同,则无法识别占位符文本和用户输入(嘿,我的电子邮件是IS user@example.com !!为什么不提交？嘿我想搜索字符串"搜索"但它不会让我来!)
• 难以设计或区分常规文本和占位符文本
• 突兀的实现(几乎总是.我不想为每个输入添加2个div和一个样式表来执行此操作)
• 只是不起作用.jQuery网站上至少有2个.

我已经玩了一些尝试让它正常工作(从我已经看到的一些代码中获得一些提示),但它仍然需要工作.特别是,表单可以发布占位符的值.欢迎评论和修改jsfiddle.(注意:Demo必须在没有占位符支持的情况下在浏览器中查看)我看到的大多数代码都会将它的值placeholder放入输入本身,导致这个问题,我觉得必须有更好的方法.

有一个很好的清洁解决方案,实际上有效吗？

编辑:我想强调一下:它应该像你在尽可能本地支持它的浏览器中看到的那样,并且尽可能不突兀,正如我当前的代码中所证明的那样,除了包括脚本并使用placeholder正常情况下支持它的浏览器.

更新:@DA目前的解决方案是完美的几个错误修复(见评论),很想看到这个100%汇集在一起​​,并把所有坏的和错误的代码放在网上羞耻.

更新:使用DA代码的几个mod工作,但它仍然不完美,主要是关于动态添加的输入字段和现有submit()绑定.感谢所有的帮助,我现在已经决定它不值得.我知道有些人肯定会使用这个.这是一个很好的技巧,但对我来说,即使是1%的可能性,表单提交做不想做的事情,或者错误地阅读用户输入,也不值得.这个小功能不值得头疼,IE和好友只能处理它,或者如果真的需要它可以根据具体情况实现,就像客户需要它一样.@DA再次感谢,这是我见过的最好的实现.

结论:我认为克服所有这些问题的唯一方法是这样的:

• 将占位符值复制到新的块级元素
• 将新元素添加到输入中
• 计算输入的高度边框和填充,并在其上移动新元素尽可能接近文本将发生的位置
• 使用标准模糊/更改/焦点事件可在输入具有值或聚焦时隐藏元素

这样,您无需在提交或处理可能发生的任何其他问题时执行任何操作.抱歉,还没有演示,我必须重新开始工作 - 但是我会保存最终的编辑内容.

我正在使用Zend表单应用程序,其中我的表单包含带有水印的文本框.

我们可以通过以下代码在HTML中实现这一点:

<input type="text" placeholder="Search" name="q" />

我的问题是如何使用Zend表单在我的输入框中添加占位符属性？

有没有办法可以在type = number的输入标签中显示占位符文本？

详细问题:HTML的输入标记的属性"占位符"用于在元素未聚焦时显示UI中输入标记的描述 - 当相同的字段获得焦点时,描述性文本将变为空白.问题是如果输入类型由type ="number"组成,则文本不可见.我的UI中确实存在空间限制,并且在输入标记之前无法提供标签.

有什么建议？

我想检查运行我的页面的浏览器是否能够处理'html 5 placeholder'

我知道我可以添加以下javascript检查:

!Modernizr.input.placeholder

但是为一次检查导入图书馆是否值得？

现代化者如何为我做这件事(我的意思是如何在封面下实施)？

第三个框中的占位符文本显示在中间,而我想要位于顶部. HTML

<div id="message">
    <ul>
      <li><h1>Send us a message</h1></li>
      <li><input type="text" placeholder="Name"></li>
      <li><input type="text" placeholder="Email"></li>
      <li><input type="text" style="height:150px;" placeholder="Message"></li>
      <li><a href="#">Send</a></li>
    </ul>
</div>

这是JSFiddle

是否可以为输入占位符和值设置不同的字体？我需要为输入占位符和值设置不同的字体,因为它们使用不同的语言.占位符使用正确的tonleft语言,但vakue使用英语.CSS3有可能吗？

我正在写一个移动网站,我正在用sass设计它.

我想更改textinput的占位符颜色,但我无法做到这一点.

这是占位符的mixin

@mixin placeholder($color) {
  ::-webkit-input-placeholder {color: $color}
  :-moz-placeholder           {color: $color}
  ::-moz-placeholder          {color: $color}
  :-ms-input-placeholder      {color: $color}
}

然后我将它包含在一个类中

.input-class {
    @include placeholder(#FFFFFF);
}

最后将类设置为输入

<input class="input-class" ...>

但没有任何反应.另外我的IDE在mixins行上设置了一个错误,说我:"未知的伪选择器-webkit-input-placeholder"和chrome似乎无法识别该标记.

如何更改占位符的颜色？无论响应是sass还是css.

提前致谢.

我正在使用以下代码来选择项目,但占位符已经不可见.我正在使用这个例子select2-bootstrap

   <div class="form-group" style="width:70px; height:44px;">
  <select class="form-control select2" multiple="multiple" id="select2" placeholder="cawky parky">
    <option>ahoj</option>
    <option>more</option>
    <option>ideme</option>
    <option>na </option>
    <option>pivo?</option>
  </select>
</div>
  <script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>

$(document).ready(function () {
$("#select2").select2({
    multiple:true,
    placeholder: "haha",
});

我正在向库模块清单文件中添加一些组件.显然,${applicationId}即使我没有在库的build.gradle文件中声明它,也可以使用占位符.它声明的唯一位置是在主模块的build.gradle中.

所以我虽然如果我在主模块中添加了一个自定义占位符,它也可以工作.

简而言之:这似乎有效:

Library的AndroidManifest.xml:

<activity android:name="${applicationId}.LibraryActivity" ...>

主模块的build.gradle:

defaultConfig {applicationId "package.name.here"...

但这不是:

Library的AndroidManifest.xml:

<activity android:label="${customPlaceholder} ...>

主模块的build.gradle:

defaultConfig {manifestPlaceholders = [customPlaceholder:"Foo"] ...}

是否有理由而不是另一个？

如果选定的选项是jQuery的第一个（占位符），则我已经成功地将不同的样式应用于普通的select元素，如下所示：

<script type="text/javascript">
        $(document).ready
        (
            function () 
            {
                $('select').each(function (index, value)
                {
                    if($(this).val()==="")
                    { 
                        $(this).css('font-style', 'italic');
                        $(this).css('color', '#636c72');
                        $(this).children().css('font-style', 'normal');   
                    }
                    else
                    {
                        $(this).css('font-style', 'normal');
                        $(this).css('color', 'black');
                        $(this).children().css('font-style', 'normal');    
                    }
                });
            }
        );
    </script>

但是，由于其中包含的条目数量庞大（可能是数千个），并且有必要使用文本搜索来缩小条目范围，因此我的某些表格正在使用bootstrap-select组件。这些组件会产生更复杂的HTML，并且以上代码根本无法工作。

我试图找到一种方法来应用与普通选择相同的逻辑：如果所选的选项是第一个选项，则以斜体和不同的颜色设置输入的样式。这是此类select的示例：

<select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
                                            onchange="this.form.submit()" data-live-search="true" title="Select Med"> 
                                            <option value="">Search Med</option>
                                            <option th:each="med : ${meds}" th:value="${med.id}" 
                                                th:text="${med.toString()}" th:selected="${med.id == medFilter}">
                                                </option>
                                        </select>

有没有人能够做到这一点？