input输入框从右往左输入

最新推荐文章于 2024-05-09 14:08:24 发布

anotheryia

最新推荐文章于 2024-05-09 14:08:24 发布

阅读量4.2k

点赞数

分类专栏： vue 文章标签： vue html

本文链接：https://blog.csdn.net/anotheryia/article/details/105089791

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

想做一个从右往左的输入框，用了 direction: rtl; 结果输入还是从左到右的，而且输入‘-’，‘.’这些符号位置和想象中的不一样。最后发现其实只要将输入框设置 text-align: right; 然后每次输入时将光标移到输入字符的左边就可以了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" ></script>
	</head>
	<body>
		<div id='main'>
			<input type='text' @input="lefttoright($event)" >
			<input type="text" @input="lefttoright($event)" style='text-align: right;'/>
		</div>
		<script>
			var vm = new Vue({
				el:'#main',
				data:{
				},
				methods:{
					lefttoright: function(e){
						var inputchar = e.data;
						var pointerPos = e.target.selectionStart;
						
						if(inputchar != null){/* 删除字符时是null */
							pointerPos -= 1;
						}
						
						e.target.selectionStart = pointerPos;
						e.target.selectionEnd = pointerPos;
					},
					
					
				},
			});
		</script>
	</body>
</html>

这里我用的是vue.js监听input事件，有输入时将光标左移一个字符。