JavaScript는 Sina Weibo에서 입력 단어 수의 즉시 확인 기능을 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript는 Sina Weibo에서 입력 단어 수의 즉시 확인 기능을 구현합니다.

小云云

Jan 31, 2018 pm 01:53 PM

javascriptjs단어 수

이 글에서는 주로 JavaScript로 구현된 Sina Weibo의 원래 생태를 모방한 즉석 입력 단어 개수 기능을 소개합니다. 여기에는 JavaScript 이벤트 응답 및 문자열 탐색, 변환, 판단 및 기타 관련 작업 기술이 포함됩니다. . 모두에게 도움이 되기를 바랍니다.

텍스트 상자에 문자를 입력하면서 입력된 단어 수를 확인하는 것은 어렵지 않지만, 일부 기능의 사용 방식으로 인해 사람들이 헷갈리기 쉽고, 헷갈리기 쉽습니다. 전체 결과를 얻지 못하고 버그가 발생하기 쉽습니다. , 여기서 길이 함수는 더 이상 사용할 수 없습니다. 이는 데이터 형식에 맞지 않는 영어와 한자에서 한 문자로 계산되기 때문입니다. 옮기다. OnChange 이벤트는 더 이상 사용할 수 없습니다. 이 이벤트는 커서가 텍스트 상자를 떠날 때만 트리거됩니다. 보다 즉각적인 OnKeyUp으로 변경되어야 합니다.

1. 기본 목표

아래와 같이 플러그인 없이 Sina Weibo를 모방하고 JQuery가 없는 순수 Javascript인 단어 수로 입력 상자를 완성합니다. 단어 수를 초과하면 해당 프롬프트가 표시됩니다. 주어지다.

영어는 반 단어로 계산되고, 중국어는 1자로만 계산됩니다.

2. 기본 레이아웃

말할 것도 없습니다. 기본 프롬프트 텍스트는 ID=test를 제공하는 것입니다. 단어 개수는 수시로 변경되므로 ID=wordLength도 제공해야 합니다. 그러면 스크립트의 inputTest 함수가 텍스트 상자의 onkeyup 이벤트를 트리거하고 해당 이벤트를 전달합니다. 동시에 과거의 가치. 동시에, 단어 개수 섹션이 시나 웨이보와 유사한 이유는 시나 웨이보가 고유 숫자를 표시하는 조지아 글꼴을 사용하기 때문이라는 것을 알게 되었습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入字数检查</title>
</head>
<body>
<p id="test"></p>
<span><input type="text" onkeyup="inputTest(this.value)" placeholder="请在此输入" /></span><span id="wordLength" style="font-family:Georgia;">0/10</span>
</body>
</html>

3. 핵심 스크립트

<script>
//获取长度函数
//这里不能用封装好的方法，因为length方法，英文算一个字符，中文也算一个字符
function getStrLength(str){
  //传递一个字符串过来
  var mylen=0;
  //遍历这个字符串
  for(var i=0;i<str.length;i++){
    //如果字符串的第i个字符的Unicode码在0-128之间就是英文字符，应该算一个长度
    if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128){
      mylen++;
    }else{
      //否则算两个长度
      mylen+=2;
    }
  }
  return mylen;
}
//输入当字符数变更就触发这个函数
function inputTest(value){
  //先调getStrLength用统计当前文本框中所含文本的值，因为getStrLength统计出来的东西是英文字符长度，所以要除以2，强行转换为整形
  //再补上/10替换wordLength中的文本，/应该被转义，否则在某些编译器中无法通过，例如Dreamwaver
  document.getElementById("wordLength").innerHTML=parseInt(getStrLength(value)/2)+"\/10";
  //如果超过10个字，20个字符
  if(parseInt(getStrLength(value))>20){
    //那么把警告内容显示出来，并把其中的颜色设置为红色，当然，你在HTML那里设置也可以
    document.getElementById("test").style.display="block";
    document.getElementById("test").innerHTML="太长，请修改至10字之内";
    document.getElementById("test").style.color="#ff0000";
  }
  else{
    //否则隐藏警告内容
    document.getElementById("test").innerHTML="";
    document.getElementById("test").style.display="none";
  }
}
</script>

관련 기사

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.