制作了一个简单的计算器，怎么让键盘输入除加减乘除和数字之外的无效

Question

<p><script><br>
import { toValue } from 'vue';<br>
	export default {<br>
		data() {<br>
			return {</p>
				
<pre><code>			Com:'',
			shu:[1,2,3,4,5,6,7,8,9,0],
			a:'',//结果
			firstnumber:'',//第一个值
			firstcun:'',//符号
			lastnumber:'',//第二个值
			
		}
	},
	methods: {
		tan(number){
			this.Com=this.Com+number.toString()
			
		  },
		  jianpan(e){
  
			var string=e.detail.value;
		for(let i = 0;i<string.length;i++){
				var char = string[i];
				if(!(char >= '0' && char <= '9' || char == '+' || char == '-' || char == '*'
				|| char == '/')){
					
			    }
			上面的代码并没有写全

}
			if(string[string.length-1]=="+"){
				this.add();
			}
			else if(string[string.length-1]=="-"){
				this.jian();
				
			}
			else if(string[string.length-1]=="*"){
				this.cheng();
				
			}
			else if(string[string.length-1]=="/"){
				this.chu();
				
			}
			else{
				this.Com+=string[string.length-1];
			}
			
		  },
		
		add(){
			if(this.firstnumber != ''){
			 this.deng();	
			}
			
			this.firstnumber = this.Com;
			//这里要给 用户的输入框赋值一个+号 让用户看到的表达式成立
			this.Com+= "+";
			this.firstcun='+';
            //this.Com = this.Com+'+';
		},
		jian(){
			if(this.firstnumber != ''){
			 this.deng();	
			}
			
			this.firstnumber = this.Com;
			this.Com += '-';
			this.firstcun = '-';

//this.Com = this.Com+'-';
		},
		cheng(){
			if(this.firstnumber != ''){
			 this.deng();	
			}
			this.firstnumber = this.Com;
			this.Com += '*';
			this.firstcun = '*';
			
			//this.Com = this.Com+'*'
		},
		chu(){
			if(this.firstnumber != ''){
			 this.deng();	
			}
			this.firstnumber = this.Com
			this.Com += '/';
			this.firstcun = '/';
			
			//this.Com = this.Com+'/'
		},
		deng(){
			
			if(this.firstcun=='+'){
				//加法运算
				this.Com = (parseInt(this.firstnumber) + parseInt(this.Com.split("+")[1])).toString();
			}
			else if(this.firstcun=='-'){
				//减法运算
				this.Com = (parseInt(this.firstnumber) - parseInt(this.Com.split("-")[1])).toString();
			}
			else if(this.firstcun=='*'){
				//乘法运算
				this.Com = (parseInt(this.firstnumber)  * parseInt(this.Com.split("*")[1])).toString();
			}
			else if(this.firstcun=='/'){
				//除法运算
				if(this.lastnumber==='0'){
					this.Com = 'Error';
					return;
				}
				this.Com = (parseInt(this.firstnumber) / parseInt(this.Com.split("/")[1])).toString();
			}
			else{

}
              
		},
		
		qing() {
               this.Com = '';
               this.a = '';
			   this.firstnumber = '';
			   this.firstcun = '';
			   this.lastnumber = '';
        },

}
}</code><script async="" crossorigin="anonymous" data-hljs-style="github" integrity="sha384-E9ssooeJ4kPel3JD7st0BgS50OLWFEdg4ZOp8lYPy52ctQazOIV37TCvzV8l4cYG" src="https://cdn.jsdelivr.net/gh/s9e/hljs-loader@1.0.34/loader.min.js"></script><script>
                    if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScript.parentNode);
                    }
                </script></pre>
<p></script></p>

<p><style><br>
	.shuru{<br>
		width: 400px;<br>
		height: 50px;<br>
	}<br>
	.numsty{<br>
		width: 50px;<br>
		  height: 40px;<br>
		  margin: 2px;<br>
		  border: none;<br>
		  background-color: #f0f0f0;<br>
		  cursor: pointer;</p>
		
<pre><code>}
.suan{
	 display: flex;
	 justify-content: space-around;
}
.bth{
	 width: 50px;
	 height: 40px;
     margin: 2px;
     border: none;
     background-color: #f0f0f0;
     cursor: pointer;
}</code><script async="" crossorigin="anonymous" data-hljs-style="github" integrity="sha384-E9ssooeJ4kPel3JD7st0BgS50OLWFEdg4ZOp8lYPy52ctQazOIV37TCvzV8l4cYG" src="https://cdn.jsdelivr.net/gh/s9e/hljs-loader@1.0.34/loader.min.js"></script><script>
                    if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScript.parentNode);
                    }
                </script></pre>

cs95 · Answer

为了让键盘输入除了数字和加减乘除运算符之外的其他字符无效，您需要在 jianpan 方法中添加逻辑来过滤掉这些字符。您已经部分实现了这个功能，但似乎没有完成。下面是一个完整的实现方式：

methods: {
  tan(number) {
    this.Com = this.Com + number.toString();
  },
  jianpan(e) {
    let string = e.detail.value;
    for (let i = 0; i < string.length; i++) {
      let char = string[i];
      if (!(char >= '0' && char <= '9' || char == '+' || char == '-' || char == '*' || char == '/')) {
        // 如果不是数字也不是操作符，则移除该字符
        string = string.replace(char, '');
      }
    }

    // 更新 Com 值，只保留数字和操作符
    this.Com = string;

    // 检查最后一个字符是否为操作符，并执行相应的操作
    if (string[string.length - 1] == "+") {
      this.add();
    } else if (string[string.length - 1] == "-") {
      this.jian();
    } else if (string[string.length - 1] == "*") {
      this.cheng();
    } else if (string[string.length - 1] == "/") {
      this.chu();
    }
  },

  // 其他方法保持不变...
}

在这个修改后的 jianpan 方法中，我们使用了 replace 函数来移除任何非数字或非运算符的字符。这样可以确保 Com 只包含有效的输入。

同时，需要注意的是，当用户输入了非法字符后，Com 的值应该立即更新，以反映正确的输入状态。上述代码实现了这一需求，确保了计算器的健壮性和用户体验。

1227499701 · Answer

cs95
大佬，这个在input中还是会出现键盘比如a字母写到上边，而且计算没问题，但是还是会出现input中出现比较奇怪的数字比如键盘输入1会显示11，摁+号也会出现++这样

cs95 · Answer

根据您的描述，问题出在输入处理逻辑上。当前的实现方式是在检测到非法字符后将其从字符串中移除，但这种方式可能会导致一些副作用，比如输入重复的问题（例如输入1显示11）。这是因为每次按键都会触发 jianpan 方法，而该方法又会重新处理整个字符串，这可能导致已经处理过的字符被再次添加。

为了改进这个问题，我们可以采取以下策略：

直接阻止非法输入：在事件处理函数中，直接检查并阻止非法字符的输入，而不是在输入后再移除它们。
避免重复处理：确保每个字符只被处理一次。

下面是改进后的代码示例：

methods: {
  tan(number) {
    this.Com = this.Com + number.toString();
  },
  jianpan(e) {
    let char = e.detail.value.slice(-1); // 获取最后输入的一个字符
    if (char >= '0' && char <= '9' || char == '+' || char == '-' || char == '*' || char == '/') {
      // 如果是数字或操作符，允许输入
      if (this.Com === '' && (char == '+' || char == '-' || char == '*' || char == '/')) {
        // 防止第一个字符就是运算符
        return;
      }
      if (this.Com[this.Com.length - 1] == '+' || this.Com[this.Com.length - 1] == '-' || this.Com[this.Com.length - 1] == '*' || this.Com[this.Com.length - 1] == '/') {
        // 防止连续的运算符
        if (char == '+' || char == '-' || char == '*' || char == '/') {
          return;
        }
      }
      this.Com += char;
    } else {
      // 如果不是数字也不是操作符，阻止输入
      e.preventDefault(); // 阻止默认行为
    }

    // 检查最后一个字符是否为操作符，并执行相应的操作
    if (char == "+") {
      this.add();
    } else if (char == "-") {
      this.jian();
    } else if (char == "*") {
      this.cheng();
    } else if (char == "/") {
      this.chu();
    }
  },

  // 其他方法保持不变...
}

在这个改进版本中，我们首先获取最后一次输入的字符，然后检查它是否是合法的（即数字或运算符）。如果字符合法，我们进一步检查是否会导致连续的运算符输入或作为首个字符的运算符输入，这些都是不允许的。如果字符非法，我们通过调用 e.preventDefault() 来阻止它的输入。这样做可以有效地防止非法字符的输入以及避免重复字符的问题。

1227499701 · Answer

cs95
确实可以了，但是这串代码没办法带入运算了，以下是我通过您的简易写的完整代码