number.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>Number</title>
  6. <script src="../../dist/jsoneditor.js"></script>
  7. </head>
  8. <body>
  9. <textarea class="value" cols="30" rows="10"></textarea>
  10. <button class='get-value'>Get Value</button>
  11. <div class='container'></div>
  12. <script>
  13. var container = document.querySelector('.container');
  14. var value = document.querySelector('.value');
  15. var schema = {
  16. "type": "object",
  17. "title": "range",
  18. "properties": {
  19. "number": {
  20. "title": "number",
  21. "type": "number",
  22. "default": 5.75,
  23. "minimum": 1,
  24. "maximum": 10
  25. },
  26. "number_number": {
  27. "title": "number number",
  28. "type": "number",
  29. "format": "number",
  30. "default": 5.75,
  31. "minimum": 1,
  32. "maximum": 10,
  33. "step": 0.25
  34. },
  35. "number_range": {
  36. "title": "number range",
  37. "type": "number",
  38. "format": "range",
  39. "default": 5.75,
  40. "minimum": 1,
  41. "maximum": 10,
  42. "step": 0.25
  43. }
  44. }
  45. };
  46. var editor = new JSONEditor(container, {
  47. schema: schema
  48. });
  49. document.querySelector('.get-value').addEventListener('click', function () {
  50. value.value = JSON.stringify(editor.getValue());
  51. console.log(editor.getValue());
  52. });
  53. </script>
  54. </body>
  55. </html>