JavaScript のフォームスクリプトに関する実践的なヒント-jsチュートリアル-php.cn

JavaScript のフォームスクリプトに関する実践的なヒント

黄舟

リリース： 2017-10-17 09:25:34

オリジナル

1485 人が閲覧しました

フォームを複数回送信しないでください

var form = document.getElementById("myform");

form.addEventListener("submit", function(event) {    
var event = event || window.event;    
var target = event.target;    
var btn = target.elements["submit-btn"];
    btn.disabled = true;
}, false);

ログイン後にコピー

上記のコードは、イベントがトリガーされた後、送信ボタンを取得し、その無効な属性を true に設定することに注意してください。この関数を実装するために onclick イベントハンドラーを渡すことはできません。その理由は、異なるブラウザ間の「時間差」によるものです。一部のブラウザは、フォームの submit イベントをトリガーする前にクリックイベントをトリガーします。

背景色を変更します。条件に従ってテキストボックスを

var textbox = document.forms[0].elements[0];

textbox.addEventListener("focus", function(event) {    var event = event || window.event,
        target = event.target;    if (target.style.backgroundColor != "red") {
        target.style.backgroundColor = "yellow";
    }
}, false);

textbox.addEventListener("blur", function(event) {    var event = event || window.event,
        target = event.target;    if (/[^\d]/.test(target.value)) {
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
    }
}, false);

textbox.addEventListener("change", function(event) {    var event = event || window.event,
        target = event.target;
    console.log(123)    if (/[^\d]/.test(target.value)) {
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
    }
}, false)

ログイン後にコピー

選択したテキストを取得

function getSelectedText(textbox) {
    if (typeof textbox.selectionStart == "number") {        
    return textbox.value.substring(textbox.selectionStart, textbox.sectionEnd);
    } else if (document.selection) {//兼容IE
        return document.selection.createRange().text;
    }
}

ログイン後にコピー

JavaScript のフォームスクリプトに関する実践的なヒント

テキストの一部を選択

function selecText(textbox, startIndex, stopIndex) {    
if (textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange) {//兼容IE8及更早版本
        var range = textbox.createTextRange();        
        range.collapse(true);        
        range.moveStart("character", startIndex);        
        range.moveEnd("character", stopIndex - startIndex);        
        range.select();
        textbox.focus();
    }
}

ログイン後にコピー

テスト1:

textbox.addEventListener("focus", function(event) {    var event = event || window.event,
        target = event.target;    if (target.style.backgroundColor != "red") {
        target.style.backgroundColor = "yellow";
    }
    selecText(textbox, 0, 1);
}, false);

ログイン後にコピー

効果:
JavaScript のフォームスクリプトに関する実践的なヒント

テスト2:

selecText(textbox, 0, 5);

ログイン後にコピー

JavaScript のフォームスクリプトに関する実践的なヒント

ゲットクリップボード情報

    getClipboardText: function(event) { //获得剪切板内容
        var clipboardData = (event.clipboardData || window.clipboardData);        
        return clipboardData.getData("text");
    }

    setClipboardText: function(event, value) { //设置剪切版内容
        if (event.clipboardData) {            
        return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData) {            
        return window.clipboardData.setData("text", value);
        }
    }

ログイン後にコピー

注意: Firefox、Safari、Chrome では、onpaste イベントハンドラーの getData() メソッドへのアクセスのみが許可されます (2017/9/1 のテスト: copy イベントの下で空の文字列を取得します)

使い方:
貼り付けイベントで、クリップボードの値が有効かどうかを判断できます。無効な場合は、次の例のようにデフォルトの動作をキャンセルできます。

textbox.addEventListener("paste", function(event) {
    var event = event || window.event;    
    text = getClipboardText(event);    
    if (!/^\d*$/.test(text)) {        
    event.preventDefault();
    }
}, false)

ログイン後にコピー