h5页面在ios手机输入框内emoji表情长度判断

1、需求：
　　要写一个讨论区的h5页面，当然包含了输入框并且输入框限制字符数 30 个，测试发现在ios手机输入emoji表情后输入框内就会超出所限制的字符长度，（说白了就是只要输入表情就会超出原有的30个字符）

　　这里呢 我们可以从两个方面去研究，第一：要么直接限制输入表情；第二：想办法计算得出表情的实际字符长度；

 

 

 

 

记住这里使用.length只对安卓起作用 ，ios手机会让你入坑，接下来我来教你跳出这个坑。直接上代码不啰嗦了；

自己找个地方去写一个js文件封装以下方法，我这里取名为emoji.js


let rsAstralRange = '\\ud800-\\udfff',
    rsZWJ = '\\u200d',
    rsVarRange = '\\ufe0e\\ufe0f',
    rsComboMarksRange = '\\u0300-\\u036f',
    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
    rsComboSymbolsRange = '\\u20d0-\\u20ff',
    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange;
let reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ']');

let rsFitz = '\\ud83c[\\udffb-\\udfff]',
    rsOptVar = '[' + rsVarRange + ']?',
    rsCombo = '[' + rsComboRange + ']',
    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
    reOptMod = rsModifier + '?',
    rsAstral = '[' + rsAstralRange + ']',
    rsNonAstral = '[^' + rsAstralRange + ']',
    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
    rsSeq = rsOptVar + reOptMod + rsOptJoin,
    rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';
let reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');

export function toArray (val) { // 字符串转成数组
    return hasUnicode(val)
        ? unicodeToArray(val)
        : asciiToArray(val);
}

export function hasUnicode (val) {
    return reHasUnicode.test(val);
}

export function unicodeToArray (val) {
    return val.match(reUnicode) || [];
}

export function asciiToArray (val) {
    return val.split('');
}



在你的页面引用：   import { toArray } from 'components/emoji.js';

sendInput 这个方法我是在input里面写的输入事件@input=“sendInput”

sendInput(e) {
	if (this.$cnt.isAndroid) {
		this.sendOutLength = e.detail.value.length
		if (e.detail.value.length > 30) {
			this.sendOutData = e.detail.value.slice(0, 30)
		}
	} else {
		this.sendOutLength = toArray(e.detail.value).length
	}
},

this.$cnt.isAndroid 这个是我用来判断安卓还是ios：安卓的话就用传统的length就行，ios就用上边封装的方法去实现

　　

自己亲测没问题的。