Question

我必须编写一个文本区域，用户应在其中输入以十进制度为单位的给定纬度。

例如：60.45678或05.1

我该怎么做才能在第二个字符后自动在文本区域中显示一个点？

我已经具有检查字符是否为数字的功能：

<script language=Javascript>
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;

            return true;
        } </script>

也许可以进行某种修改，以便添加一个点并检查前两个数字是否小于90？

<textarea name="LongitudeEW" placeholder="Longitude East/West." onkeypress="return isNumberKey(event)"></textarea>

感谢您的帮助：）

Answer 1

尝试一下

var DECIMAL_REGEXP = /(?<=^.{2}$)/g;

function handleKeyUp(e) {
  var target = e.target;
  var charCode = e.which || e.keyCode;

  if(charCode > 31 && (charCode < 48 || charCode > 57)){
    return false;
  }

  target.value = target.value.replace(DECIMAL_REGEXP, '.');

  return true;
}

var DECIMAL_REGEXP = /(?<=^.{2}$)/g;

function handleKeyUp(e) {
  var target = e.target;
  var charCode = e.which || e.keyCode;
  
  if(charCode > 31 && (charCode < 48 || charCode > 57)){
    return false;
  }

  target.value = target.value.replace(DECIMAL_REGEXP, '.');
  
  return true;
}

<textarea name="LongitudeEW" placeholder="Longitude East/West." onkeypress="return handleKeyUp(event)"></textarea>

如果您想绑定到元素keypress事件与内联：

// cache the regexp
var DECIMAL_REGEXP = /(?<=^.{2}$)/g;

// ref the textarea
var textrea = document.getElementById('LongitudeEW');

// bind to the keypress event
textrea.addEventListener('keypress', function(e){
  var target = e.target,
      charCode = e.which || e.keyCode;
      
  if(charCode > 31 && (charCode < 48 || charCode > 57)){
    e.preventDefault();
  }

  target.value = target.value.replace(DECIMAL_REGEXP, '.'); 
});

<textarea id="LongitudeEW" name="LongitudeEW" placeholder="Longitude East/West."></textarea>

Answer 2

您可以尝试使用以下库：https://nosir.github.io/cleave.js/

例如，作为您的要求。希望对您有帮助，我的朋友：））

<script src="cleave.js"></script>

<input class="input-element" type="textarea" >

<script>
    $(function(){       

        var cleave = new Cleave('.input-element', {
            delimiter: '.',
            blocks: [2, 100],
            numericOnly: true
        });
    });
</script>

如何自动在文本区域的第n个字符后自动添加点？

2 个答案: