允许人们只修改输入JavaScript中的某些值

allow people to only alter certain values in an input JavaScript

本文关键字:JavaScript 许人们 修改 输入      更新时间:2023-09-26

我有以下代码

<input id="startDate "type="text" name="courseDate" value="MM/YYYY" />

我想知道如何使用JavaScript来确保用户只能编辑文本框中的"MM"answers"YYYY"。

谢谢Y

这不是个好主意。用户总是可以禁用JavaScript,你将不得不处理浏览器兼容性,以获得光标位置等。最好有两个输入,中间有破折号(也许可以使用包装器将它们样式设置为一个):

<div id="startDate">
  <input id="startMonth" type="text" name="courseMonth" value="MM">/<input id="startYear" type="text" name="courseYear" value="YYYY">
</div>

此外,在选择中使用月份(也可能是年份)通常更好,而不是在文本输入中。

使用html5日期输入:

<input type="date" max="2012-06-25" min="2011-08-13" name="the_date">
http://www.alsacreations.com/xmedia/tuto/html5/elements-de-formulaire/input-type-date.php

下面是一些伪代码,概述了您想要使用的过程:

// save the initial value of the field so we know what the year is supposed to be set to
var initValue = document.getElementById("startDate").value;
var initValueSplit = initValue.split("/");
document.getElementById("startDate").onkeyup = function() {
    // get the value of whatever the user has entered
    var newValue = document.getElementById("startDate").value;
    // split the new value into an array, where 0th element is MM and 1st element is YYYY
    var newValueSplit = newValue.split("/");
    // rewrite the value of the field, using the user's version of the month and the saved version of the year
    var fixedValue = newValueSplit[0] + "/" + initValueSplit[1];
    // change the value of the field to fixedValue
    document.getElementById("startDate").value = fixedValue;
}

这将把YYYY的值更改回原始/起始值。

你可以这样做一些javascript代码(这里是工作的fiddle):

function test1(e, input)
{
    var key = e.keyCode || e.charCode;
    console.log(key);
    if( key == 8 || key == 46 )
    {
        e.preventDefault();
        e.stopPropagation();
        setCursorPosition(input, (getCursorPosition(input) - 1));
        return false;
    }
}
function test(e, input)
{
    console.log("test");
    e.preventDefault();
    e.stopPropagation();
    var tempString = input.value;
    var cursorPosition = getCursorPosition(input);
    if(cursorPosition != 2)
    {
        tempString = "";
        for(var i = 0; i < input.value.length; i++)
        {
            if(cursorPosition != i)
            {
                tempString += input.value.charAt(i);            
            }
            else
            {
                var keynum;
                if(window.event){ // IE					
            	    keynum = e.keyCode;
                } else if(e.which){ // Netscape/Firefox/Opera					
            		keynum = e.which;
                }
                tempString += String.fromCharCode(keynum);
            }
        }
    }
    input.value = tempString;
    if(cursorPosition == 1)
    {
        setCursorPosition(input, (cursorPosition + 2));
    }
    else
    {
        setCursorPosition(input, (cursorPosition + 1));
    }
}
function getCursorPosition (oField) {
  // Initialize
  var iCaretPos = 0;
  // IE Support
  if (document.selection) {
    // Set focus on the element
    oField.focus ();
    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange ();
    // Move selection start to 0 position
    oSel.moveStart ('character', -oField.value.length);
    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }
  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionStart;
  // Return results
  return (iCaretPos);
}
function setCursorPosition(elem, caretPos) {
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}
<input id="startDate "type="text" onkeydown="test1(event, this);" onkeypress="test(event, this);" name="courseDate" value="MM/YYYY" />

部分功能取自其他帖子:

这里的

在这里在这里

查看下面的jsfield。这听起来和你想做的很像:

http://jsfiddle.net/SO_AMK/SEXAj/

$("#date").mask("99/99/9999");

这是使用jQuery库

下面是一个实现的例子:

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$("#date").mask("99/99/9999");
});//]]>  
</script>