js动态提示输入框剩余字符数及accessbility实现（无障碍网页）-优快云博客

本文链接：https://blog.youkuaiyun.com/Cassy_Wu/article/details/104482099

本文介绍了如何实现JavaScript动态提示输入框的剩余字符数，并重点讨论了如何支持屏幕阅读器，包括利用`aria-live`和`aria-atomic`属性确保无障碍网页体验。提供了一个实例链接供读者查看和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现如何动态提示输入框剩余子符很简单，获取当前字符数，再修改下标显示的数字就可以。但是谈及如何支持屏幕阅读器，大部分学习前端的小伙伴就有点束手无策了。正好碰到有一个类似的需求，就总结一下。希望能帮助到有需求的小伙伴。

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">
  .textArea__wrapper{
    position: relative;
    display: inline-block;
  }
  .comments {
    width: 300px;
    height: 200px;
    resize: none;
  }
  .counter__Wrapper{
    position: absolute;
    right: 0;
    bottom: 8px;
  }
  .invisibleTxt{
    position: absolute;
    left: -999em;
  }
</style>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var maxLength = $('#comments').attr('maxLength');
    $('textarea').keyup(function() {
      var inputLength = $(this).val().length;
      var remainLength = maxLength-inputLength;
      $('#charCount').text(remainLength);
    });
  });
</script>
<body>
  <div class='textArea__wrapper'>
    <label class='fieldLabel ' for='comments'>Anything else you&#39;d like us to know?</label></br>
    <textarea id='comments' name="comments" rows='5' placeholder='Maximum 500 characters'
      class='comments'
      maxLength='500'></textarea>
    <div aria-live='polite' aria-atomic='true' class="counter__Wrapper"><span id="charCount">500</span>&nbsp;<span class='invisibleTxt'>characters remaining</span></div>
  </div>
</body>
</html>

涉及知识点：

aria-live

aria-live = POLITENESS_SETTING 用于设置屏幕阅读器处理实时区域更新的优先级
通常情况下只会使用 aria-live = "polite "

参数
aria-live = “off”	默认设置关闭；屏幕阅读器不作任何处理
aria-live = "polite "	屏幕阅读器应等到用户闲置后再向用户提供更新
aria-live = “assertive”	优先级高于“polite”,当同时有消息时，屏幕阅读器会优先读取设置aria-live = "assertive"的消息