js は、Element の入力コンポーネントのいくつかの機能を実装し、それをコンポーネントにカプセル化します (サンプルコード)

現在実装されているのは、基本的な使用方法、クリア可能なボックス、パスワードボックスです。参考リンク: https://element.eleme.cn/#/zh-CN/component/input

HTML コード: コンポーネントをテストする場合は、対応するコンポーネントのコメントを解除するだけです。赤でマークされた js と css を自分の場所に合わせて変更することを忘れないでください。

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">
    <title>js はクリア可能な入力コンポーネントを実装します</title>
    <script src="../js/input/jsInput.js"></script>
    <link rel="スタイルシート" type="text/css" href="../css/jsInput.css"/>
  </head>
  <本文>
    <スクリプト>
      //通常の入力ボックス document.write(createElementInput())
      //クリア可能な関数を追加
      //document.write(createElementInput("クリア可能"))
      //パスワードボックスのshow-passwordを実装する
      //document.write(createElementInput("パスワードを表示"))
    </スクリプト>
  </本文>
</html>

JSコード:

関数createElementInput(str){
  var temp = str;
  var html = "<div id='my_input_div' onmouseover='addClearNode(\""+str+"\")'' onmouseout='hiddenClearNode(\""+str+"\")''>";
  html += "<input id='my_input' placeholder='コンテンツを入力してください'";
  if(str){
     if(str == 'パスワードを表示'){
       html+=" type = 'パスワード' ";
     }
  } 
  html += "oninput='addClearNode(\""+str+"\")'";
  html += "onclick='changeColor(\""+str+"\")'";
  html += "onblur='hiddenClearNode(\""+str+"\")'/>";
  if(str){
   html += "<input id='"+str+"' onmousedown='changeValue(\""+str+"\")'/>";
  }  
  html += "</div>"
  html を返します。
}

//box-shadow: 0 0 0 20px pink; 影を追加して境界線を表示します function changeColor(str){
  //アラート(文字列)
  document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff";
  //入力の値を取得します。var value = document.getElementById('my_input').value;
  var ボタン = document.getElementById(str);
  //入力ボックスに値があるかどうかのチェックを追加し、クリアボタンを表示します。if (value) {
    if(ボタン){
      button.style.visibility = "表示"
    }
  }
}
//コンテンツに入った後にこのイベントを使用する必要があります function addClearNode(str){
  var 値 = document.getElementById('my_input').value;
  var ボタン = document.getElementById(str);
  //アラート(値)
  if(値){
    if(ボタン){
      //ボタンを表示可能に設定する button.style.visibility = 'visible'
    }
  }それ以外{
    //属性が存在するかどうかを判断します if(button){
      //ボタンを非表示に設定する button.style.visibility = 'hidden'
    }
  }
  //選択後、div は選択したスタイルを追加し、強調表示します。 document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
}
//入力値を変更する関数 changeValue(str){
  if(str){
    if(str == 'クリア可能'){
      clearValues(文字列);
    }else if(str == 'show-password'){
      パスワードを表示します。
    }
  }
  
}
// 入力値をクリアする function clearValues(str) {
  document.getElementById("my_input").value = "";
  document.getElementById(str).style.visibility = "非表示";
  //まだ選択状態なので、div の境界線で影が強調表示されます document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}

//クリアボタンを非表示にする function hiddenClearNode(str){
  var ボタン = document.getElementById(str);
  if(ボタン){
    button.style.visibility="非表示";
  }
  //div シャドウを 0 に設定する
  document.getElementById("my_input_div").style.boxShadow="0 0 0"
}

//パスワードを表示する関数 showPassword(){
  var myInput = document.getElementById('my_input');
  var パスワード = myInput.value;
  var type = myInput.type;
  //アラート(タイプ)
  if(型){
    if(type == 'パスワード'){
      myInput.type = '';
      myInput.value = パスワード;
    }それ以外{
      myInput.type = 'パスワード';
      myInput.value = パスワード;
    }
  }
  //まだ選択状態なので、div の境界線で影が強調表示されます document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}

CSSコード:

#私の入力div{
  幅: 150ピクセル;
  境界線: 1px 銀色;
  境界線の半径: 4px;
  位置: 相対的;
}
#私の入力{
  高さ: 30px;
  幅:100ピクセル;
  左マージン: 6px;
  境界線: なし;
  アウトライン: なし;
  カーソル: ポインタ;
}
#クリア可能{
  高さ: 20px;
  幅: 15px;
  テキスト配置: 中央;
  可視性:非表示;
  境界線: なし;
  アウトライン: なし;
  色: #409eff;
  カーソル: ポインタ;
  背景画像: url(../image/clear.svg);
  背景繰り返し: 繰り返しなし;
  背景サイズ: 12px;
  位置: 絶対;
  上: 10px;
  左: 120px;
  表示: インラインブロック;
}
#パスワードを表示{
  高さ: 20px;
  幅: 15px;
  テキスト配置: 中央;
  可視性:非表示;
  境界線: なし;
  アウトライン: なし;
  色: #409eff;
  カーソル: ポインタ;
  背景画像: url(../image/eye.svg);
  背景繰り返し: 繰り返しなし;
  背景サイズ: 12px;
  位置: 絶対;
  上: 10px;
  左: 120px;
  表示: インラインブロック;
}

残りの機能も徐々に改善されていきます。

これで、Pure js を使用して Element の入力コンポーネントの一部の機能を実装し (徐々に改善)、コンポーネントにカプセル化する方法についての記事は終了です。入力コンポーネント機能の実装に関するより関連性の高い js コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: