Question

我喜欢这些人在textarea中复制/粘贴数据输入，验证和布局的过程。我似乎超越了常见的表单验证模型。

http://batchgeo.com/

有人可以推荐一个js库或者有关这个主题的阅读吗？

他们的地理测绘也令人印象深刻但并不神秘。

感谢，

Answer 1

实际上它非常简单。如果您使用Chrome，Firefox，Safari检查器，则可以看到它们使用的布局和标记。他们所做的是使用文本区域和表格。该表用于列表布局，单击文本区域时粘贴，在

中键入数据

单击时会切换文本区域和表格。基本上一个是隐藏的，一个是显示的。对于我们只是在两个元素上切换一些css，表格被切换出文本区域切换，请参阅下面的小提琴。

表中的数据被输入到视图，表视图和文本区域视图中。文本区域视图中的文本使用隐藏的选项卡代码来分隔文本。当您键入某些文本时，它们会有一些格式化的java脚本，或者尝试将该数据格式化为列。这是一种CSV解析器，在检测到数据中的列后，它构造了另一个包含列和行的表来匹配您的数据，为此他们在代码中创建一个新表，附加行或编辑示例。我可能只是创建一个新表并切换它。我没有在示例中添加它，因为它会有太多的代码。

最难的部分可能是css样式，使表格固定文本区域的大小，使文本和列匹配。您可以在文本区域和表格中添加滚动条（使用周围的滚动div），这在我的示例中显示。

<强> HTML

<textarea id="ta" onClick="toggle(this)" class="spreadsheet hide">

//...text version goes here    

</textarea>

 <div id="tb" onClick="toggle(this)" class="spreadsheet">
 <table>
   //..table rows and cols go here 
 </table> 
 </div>

查看代码和css的工作小提琴

http://jsfiddle.net/8knfa56b/2/

这只是它如何完成的一个简单例子，它并非接近完美，但只要有一点爱和时间就可以完成。

textarea中的奇特数据输入，验证和布局

1 个答案: