Question

问题

我是邪恶的定义，因此，我很高兴向我的用户撒谎。

目前，我正在寻找一种方法来误导这些愚蠢的傻瓜关于文本输入框的内容。我想在输入框中显示一个值，同时完全提交一个不同的值。此外，我还要奖励那些勇敢的用户，以诚实的回应来检查元素的价值属性。

Google的那些狡猾的supervillains已经在他们自己的浏览器内部完成了这个：

http://plnkr.co/edit/lRG9YGJMDVM8NgCOp6NV（在Chrome中查看。使用输入值播放）

这是JavaScript：

window.addEventListener('DOMContentLoaded', function() {
  var date = document.getElementById('date');
  var time = document.getElementById('time');

  var show_date = document.getElementById('show_date');
  var show_time = document.getElementById('show_time');

  var display_real_value = function() {
    show_date.innerHTML = date.value;
    show_time.innerHTML = time.value;
  }

  display_real_value();

  date.addEventListener('change', display_real_value);
  time.addEventListener('change', display_real_value);
  date.addEventListener('keyup', display_real_value);
  time.addEventListener('keyup', display_real_value);
});

详情

正如您将在该示例中看到的那样，显示的值与value属性中的实际值完全分离。我实际上需要能够以编程方式修改它们。

最后，我想在没有jQuery的情况下实现这一点，并且不添加任何其他DOM元素，也不会对它将出现的上下文做出任何假设。尽管支持旧版浏览器，但仍可接受对常绿浏览器的限制支持。会很好。

用例

由于我毫无疑问地被告知这是一个坏主意或者问我打算用它做什么，我现在回答：我的目的是制作一个填充日期和时间的填充物与Chrome的实施工作非常相似，可以设置样式并编写脚本，用户无需知道任何有关polyfill如何工作的信息。

迄今为止最好的想法

我怀疑我可能会遇到吸气剂和制定者的某个地方，并将实际值存储在物体的不同属性上，但我没有满足我的所有标准。

附加说明

我不想添加新的隐藏DOM元素的原因是因为当用户想要编写他们添加的日期输入脚本时，他们必须查找隐藏输入的值而不是他们实际添加的那个。我希望尽可能透明地完成这项工作，这样就像添加脚本并忘记它一样简单。

以下是我需要做的一些要点：

以编程方式更新输入中显示的字符串。我一直在使用setRangeText。
以编程方式更新显示输入的选定部分。我一直在使用setSelectionRange。
使用原始输入元素上的element.value检索修改后的值。
在表单提交时提交修改后的值。

也许这是不可能的。如果这是最好的答案，这很好，但我希望有一些我没有想过的东西。

Answer 1

根据您对问题评论的回复，我想您想做什么：

当使用您的polyfill的程序员将其应用于元素时，隐藏该元素（例如element.style.display = "none";）并将您自己的元素放在其位置以提供您的UI。这是相当标准的做法;例如，请查看select2。

当页面用户通过您的UI更新值时，您将相应的值放在您隐藏的字段中。

使用您的polyfill的程序员不必知道它是如何工作的;他/她只是从原始字段读取值（再次，使用代码，或通过提交字段所在的表单）。

程序员必须具备的一些知识：他/她必须知道，如果他/她想设置字段的值 em>将您的polyfill应用于该字段，他/她应该通过您的API执行此操作，而不是直接设置字段的值。这是因为当JavaScript设置表单字段的值时，没有触发可靠的跨浏览器事件。当你可以进行民意调查，寻找更新时，坦率地说这似乎是不合理的。（虽然我想如果你有一个DOM中所有特殊输入的列表，并且每100ms左右检查一次整个列表，性能影响可以忽略不计。但是如果程序员使用你的polyfill，它就不应该＆＃39通过你的API设置价值是一件大事。我想你可以提供两种选择。）

如何使用普通的JavaScript向用户说谎文本输入的值？

问题

详情

用例

迄今为止最好的想法

附加说明

1 个答案: