标签: placeholder

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

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

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

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

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

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

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

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

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

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

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

这是一个非常具体的问题.我设法通过使用名为EmailAddress.cshtml,保存在~/Views/Shared/EditorTemplates/文件夹中的编辑器模板自动将占位符属性添加到html5电子邮件输入类型.请参阅以下代码:

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })

它的工作原理是因为我[DataType(DataType.EmailAddress)]在视图模型中使用了DataAnnotation.

什么不起作用是我使用int?变量.

public class MiageQuotaRequestViewModel
{
    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Nombre de place demandées", Prompt = "Nombre de place")]
    [Range(0, 50, ErrorMessage = "La demande doit être comprise entre 0 et 50 places")]
    public int? RequestedQuota { get; set; }
}

@Html.EditorFor 像这样翻译这个输入:

<input class="text-box single-line" data-val="true" data-val-number="The field Nombre de place demandées must be a number." data-val-range="La demande …

当父下拉列表更改其选择以加载要更改其占位符的下拉列表的选项时,我想更改selectize.js创建的下拉列表的占位符.在文档中没有方法可以做到这一点.

当用户点击按钮时,我想要显示一个UISearchBar.在buttonPress方法中,我创建了searchBar并将其添加为子视图,然后调用[searchBar becomeFirstResponder].如果我取出这个yesFirstResponder调用,搜索图标和占位符文本将出现在textField的中心.

然后,当搜索栏成为第一响应者时,两个动画都是左对齐的.

因为我连续两个动作,我得到一个奇怪的动画,其中图标和占位符从(0,0)动画.

如何禁用此动画,以便我可以简单地将第二个图像添加到我的视图中？

编辑:

我通过使用正确显示占位符文本

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
{
    [searchBar setPlaceholder:@"Type Here to Search"];
}

我可以使用移动搜索图标[searchBar setPositionAdjustment:UIOffsetMake(x, y) forSearchBarIcon:UISearchBarIconSearch];,但更改仍然在动画中应用.

我想在我的表格的占位符中添加一个颜色asterix,这可能吗？

嗨,UISearchBar这UISearchbar是非占位符文本对齐的奇怪行为,而非编辑模式,但在编辑模式下显得很好.在非编辑模式中,占位符文本位置不显示为中心,该文本显示位于俯视UISearchbar截图.

非编辑模式占位符看起来像:

编辑模式占位符看起来像:

正如你所看到的那样,第一个截图显示文字显示位置不像第二个屏幕截图中心.所以我想把这个地方Holder文本中心作为搜索图标Y位置.

我只是使用基本方式设置搜索栏占位符文本:

 [self.srcbar setPlaceholder:@"Please Enter search Text"];

请帮我解决这个问题.

此时我正在使用我的Entity类中的Annotations使用Symfony Validator组件实现验证.

Symfony文档显示您可以使用某些占位符通过消息传递变量,这些消息可以由转换器组件转换.

例如,可以编写以下注释:

/**
 * Assert\Length(
 * min = 5,
 * max = 10,
 * minMessage = "Title too short: {{ limit }}",
 * maxMessage = "Title too long: {{ limit }}"
 */
 protected $title;

这很好用,但我想知道你有哪些占位符？是否可以创建自定义占位符？

我知道{{ value }}占位符存在(并且有效),但它不在Symfony的文档页面上,关于如何使用长度验证.

我想使用占位符标签,{{ key }}或者{{ name }}通过字段的技术名称(在本例中为"title"),所以我可以写我的minMessageasminMessage = "{{ field }} too short: {{ limit }}"

我试图检查Symfony的标准组件,看看这些占位符是如何处理的,但我找不到适合我的变量列表.

请帮我!T_T

我想介绍一个多语言系统。我有一个函数组件，它根据所选语言（来自 Context API）返回特定元素的翻译。

一切正常，直到我将翻译后的元素放入表单（选项值、占位符等）中 - 然后它显示为 [object object]。

这就是两个问题的诞生：

1. 是否可以将此组件作为 HTML 表单接受的字符串之类的内容返回？

2. 是否可以将上下文消费者应用于纯JS函数，这样它就不会返回React组件，而是返回一个原始值？

翻译组件：

const Translation = ({ element }) => {
  let translation;

  return (
    <LanguageConsumer>
      {({ language }) => {
        switch (language) {
          case "pl":
            translation = plTranslation;
            break;

          case "en":
            translation = enTranslation;
            break;

          default:
            translation = enTranslation;
        }

        return translation[element];
      }}
    </LanguageConsumer>
  );
};

例子：

<option value="en">
  <Translation element="globalLanguageEnglish" />
</option>

在此先感谢您的帮助。

我在Reactjs上使用ag-grid进行表格显示。在日期列中，日期选择器过滤器格式是mm/dd/yyyy，但我需要将其更改为dd/mm/yyyy. 我用来agDateColumnFilter过滤。行中数据的日期格式是正确的，它们是 dd/mm/yyyy，但在过滤器中仍然有mm/dd/yyyy. 我怎样才能解决这个问题？

我对网格中的每一列使用 GetTextFieldAdvancedTable 函数。

function GetTextFieldAdvancedTable(\n  field,\n  headerName,\n  width,\n  editable = false,\n  hide = false,\n  sort = "",\n  rowGroup = false,\n  rowDrag = false,\n  filter = "agTextColumnFilter",\n  menuTabs = ["filterMenuTab"],\n  filterParams = {\n    textFormatter: function(r) {\n      if (r == null) return null;\n      r = r.replace(new RegExp("\xc4\xb0", "g"), "i");\n      r = r.replace(new RegExp("\xc4\x9e", "g"), "\xc4\x9f");\n      r = r.replace(new RegExp("\xc3\x87", "g"), "\xc3\xa7");\n      r = r.replace(new RegExp("I", "g"), "\xc4\xb1");\n      r …