Question

我有以下代码

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

我想知道如何使用JavaScript来确保用户只能编辑＆＃34; MM＆＃34;和＆＃34; YYYY＆＃34;在文本框中。

由于 ÿ

Answer 1

这不是一个好主意。用户总是可以禁用JavaScript，你必须处理浏览器兼容性以获得光标位置等。最好有两个带有它们之间的破折号的输入（并且可能将它们设置成使用包装器的样式）：

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

通常情况下，选择月份（也可能是年份）更好，而不是文本输入。但这不是必要的。

Answer 2

查看下面的这个jsfiddle。这听起来与你想要做的相似：

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>

Answer 3

使用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

Answer 4

这里有一些伪代码概述了你想要使用的过程：

// 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的值更改回原始值/起始值。

Answer 5

你可以使用这样的一些javascript代码（here is working 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" />

其他一些职能来自其他职位：

here here here here

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

5 个答案: