Textarea输入字数限制的简单示例(兼容iOS、安卓)

前端之家收集整理的这篇文章主要介绍了Textarea输入字数限制的简单示例(兼容iOS、安卓)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编两巴掌来看看吧!

最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机,

下面直接贴代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>textarea输入字数限制(兼容ios和安卓)</title>
  6. </head>
  7. <body>
  8. <!-- 最多输入10个字 -->
  9. <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  10. <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  11. <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  12. <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  13. <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  14. <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  15. <script>
  16. var textarea = document.getElementsByTagName('textarea');
  17. for (var i = 0; i < textarea.length; i++) {
  18. textarea[i].oninput = function() {//注意,这里要用oninput,不要用onkeyup,否则iOS系统不支持
  19. this.value = this.value.substring(0,10);
  20. }
  21. }
  22. </script>
  23. </body>
  24. </html>
  25. <!--end End jb51.cc()-->

遇到的坑:刚开始用onkeyup,发现iOS系统不支持,改用oninput,测试OK。

猜你在找的HTML相关文章