jQuery中 简易快速字母大小写转换器

  • 源码大小:7.55KB
  • 所需积分:1积分
  • 源码编号:19JP-3569
  • 浏览次数:1059次
  • 最后更新:2023年06月27日
  • 所属栏目:文本
本站默认解压密码:19jp.com 或 19jp_com

简介

您是否需要将文本从大写更改为小写,或者反之亦然,或者将其从标题大小写更改为句子大小写?Easy Fast Letter Case Converter是一个有用的工具,只需点击几下即可以最佳方式完成此操作。

这个基于jQuery的在线工具允许您快速轻松地在不同的字母大小写之间转换文本,如小写、大写、标题大小写、大写等。

如何使用它:

1.为在线案例转换器创建一个HTML表单。

  1. <form action="#">
  2.  
  3. <!-- Input -->
  4. <label for="input-text">Your Text</label>
  5. <textarea id="input-text" placeholder="Type or paste text here..." name="input-text"></textarea>
  6.  
  7. <!-- Output -->
  8. <div id="textarea-result">
  9. <label for="formatted-text">Result</label>
  10. <textarea id="formatted-text" name="formatted-text" readonly></textarea>
  11. </div>
  12. <div id="div-result" style="display:none;">
  13. <label for="formatted-text">Result</label>
  14. <div id="formatted-text-div" name="formatted-text-div"></div>
  15. </div>
  16.  
  17. <!-- Remove Multiple Spaces -->
  18. <input type="checkbox" class="form-check-input" id="rem-multi-space" name="rem-multi-space" value="1" checked>
  19. <label for="rem-multi-space">Remove Multiple Spaces</label>
  20.  
  21. <!-- Buttons -->
  22. <a href="#" id="title-case" title="E.g. 'hello ablie'=> 'Hello Ablie'">Title Case</a>
  23. <a href="#" id="capitalize-case" title="E.g. 'ousman kasman'=> 'Ousman Kasman'">Capitalize Case</a>
  24. <a href="#" id="lower-case" title="E.g. 'HELLO is HI'=> 'hello is hi'">Lower Case</a>
  25. <a href="#" id="upper-case" title="E.g. 'Salam is peace'=> 'SALAM IS PEACE'">Upper Case</a>
  26. <a href="#" id="bold-text" title="Format text to bold case">Bold Text</a>
  27. <a href="#" id="strike-through" title="Format text to strikethrough text">Strikethrough</a>
  28. <a href="#" id="underline-text" title="Convert text to underline text">Underline Text</a>
  29.  
  30. <!-- Copy Buttons -->
  31. <a href="#" class="text-area-copy" data-clipboard-target="#formatted-text">
  32. Copy
  33. </a>
  34. <a href="#" class="div-copy" data-clipboard-target="#formatted-text-div" style="display:none;">
  35. Copy
  36. </a>
  37. </form>

2.在文档中加载jQuery库和Case Converter的JavaScript。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/assets/js/script.js"></script>

3.启用“复制”按钮将文本复制到剪贴板中。

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
  1. var clipboard = new ClipboardJS('.copy-btn');

预览截图