input相关

最新推荐文章于 2022-09-07 15:22:48 发布

mySunshine921

最新推荐文章于 2022-09-07 15:22:48 发布

阅读量182

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/lxhmm921/article/details/107152128

版权

js 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

5.输入框限制字符，汉字15个，字母30个，最对输入30个字母

function inputLength(ele,num){
				var matchWords = 0;
				$(document).on('input propertychange',ele, function () {
						if(getLength($(this).val())<=num){
							matchWords = $(this).val().trim().length;
						}
						if(getLength($(this).val()) > num){
							$(this).val($(this).val().trim().substr(0,matchWords));
							return false;
						}
					});
				// 获得字符串实际长度，中文2，英文1 要获得长度的字符串
				function  getLength(str) {
					var realLength = 0, len = str.length, charCode = -1;
					for ( var i = 0; i < len; i++) {
						charCode = str.charCodeAt(i); //unicode编码
						if (charCode >= 0 && charCode <= 128) //数字、字母、特殊符号范围
							realLength += 1;
						else
							realLength += 2;
					}
					return realLength;
				}
			}
			inputLength("#userName",30);

unicode码参考表 https://www.cnblogs.com/lwqhp/p/3175817.html

4.输入框提示样式

//textarea
.huix-error-larea::-webkit-input-placeholder{font-size:16px;color: #9399A5;}
//input
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
	color: red;
}
::-moz-placeholder { /* Firefox 19+ */  
	color: red;
}
:-ms-input-placeholder { /* IE 10+ */ 
 color: red;
}
:-moz-placeholder { /* Firefox 18- */ 
 color: red;
}

3.输入框数字监听

$(document).on("input propertychange",".huix-error-larea",function(){
		 var val=$(this).val();
		 var len=$(this).val().length;
		 var $dataPar=$(this).siblings(".error-form-need-data");
		 var $data=$dataPar.find(".input-data");
		 $data.text(len);

	 })

2.输入框只能输入正整数

  <input type="number" onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" class="mark mark-num" />

onKeyUp=“this.value=this.value.replace(/[^.\d]/g,’’);this.value=this.value.replace(’.’,’’);”

1.输入框限制字符数

maxlength=“20”
3.输入框长度适应内容

/*input内容自适应宽度*/
function resize(obj){
 	$(".thank-award-name").text( $(obj).val());
  		 $(obj).css({'width':$(".thank-award-name").css('width'),});
  		 
   }
$("input").bind("input propertychange change",function(event){resize(this)})