Question

我有一个文本区域，用户可以在文本区域输入，在开始时它将是小写，但是一旦用户点击“T（切换）”按钮，之后输入的内容将更改为上限案例前一个案例仅为小写。如果用户再次单击“T（切换按钮）”，那么之后键入的内容将以小写字母显示，依此类推。我尝试了但是没有成功。

<input type="button" name="toggleCase" id="toggleCase" value="T"  style="width:40px;" onclick="javascript:changeCase(this);" />
<textarea tabindex="1" cols="39" rows="2" onkeydown="checkTxtCase(this);"  name="titleText1">&nbsp;</textarea>

JS：

function checkTxtCase(elmObj) {
    setCursorToTextEnd(elmObj.id);
    var txtVal = elmObj.value;
    var txtLen = txtVal.length;

    prevSize = txtLen;
    var txtLast = txtVal.substring(txtLen - 1, txtLen);

    if (textCase == 'LOWER') {
        elmObj.value = txtVal.substring(0, txtLen - 1) + txtLast.toLowerCase();
    } else {
        elmObj.value = txtVal.substring(0, txtLen - 1) + txtLast.toUpperCase();
    }
    return true;
}


function setCursorToTextEnd(textControlID) {
    var text = document.getElementById(textControlID);
    if (text != null && text.value.length > 0) {
        if (text.createTextRange) {
            var FieldRange = text.createTextRange();
            FieldRange.moveStart('character', text.value.length);
            FieldRange.collapse();
            FieldRange.select();
        } else if (text.setSelectionRange) {
            var textLength = text.value.length;
            text.setSelectionRange(textLength, textLength);
        }
    }
}


var textCase = 'UPPER';
var prevSize = 0;

function changeCase() {
    document.getElementById('titleText1').focus();
    textCase = (textCase == 'LOWER') ? 'UPPER' : 'LOWER';
}

任何建议都表示赞赏。

Answer 1

var textCase = 'toLowerCase';
var pos = 0;

function changeCase() {
    var textarea = document.getElementsByName('titleText1')[0];
    pos      = textarea.value.length;
    textCase = (textCase == 'toUpperCase') ? 'toLowerCase' : 'toUpperCase';
    textarea.focus();
}

function checkTxtCase(elem) {
    var l = elem.value.substr(pos);
    elem.value = elem.value.substr(0, pos) + l[textCase]();
}

FIDDLE

Answer 2

我找到了一个插件给你。它真的很酷，它确实有效。

http://jquerybyexample.blogspot.com/2011/12/jquery-plugin-for-uppercase-lowercase.html

这会对你有所帮助

我为你创造了一个小提琴。检查

http://jsfiddle.net/KKX5G/2/

$('#Txt').Setcase({caseValue : 'lower'});

点击按钮切换案例

2 个答案: