javascript - 文本区域内精美的数据输入、验证和布局

Question

我喜欢这些人在文本区域内复制/粘贴数据输入、验证和布局所做的事情。我似乎超越了常见的表单验证模型。

http://batchgeo.com/

有人可以建议一个 js 库或一些关于这个主题的读物吗？

他们的地理 map 也令人印象深刻，但并不那么神秘。

谢谢

Answer 1

其实很简单。如果您使用 Chrome、Firefox、Safari 检查器，您可以看到它们使用的布局和标记。他们所做的是使用文本区域和表格。该表格用于柱形表布局，以及单击时的文本区域，以便您粘贴、键入数据

单击时文本区域和表格会切换。基本上一个是隐藏的，一个是显示的。对于我们只需在两个元素上切换一些CSS，表格就会被切换出来，文本区域会被切换进来，请参见下面的 fiddle 。

表中的数据被输入到两个 View 中: TableView 和文本区域 View 。文本区域 View 中的文本使用隐藏的制表符代码来分隔文本。当您输入某些文本时，它们会使用一些 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 的工作 fiddle

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

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