zzy

2024年12月18日 813 字大概 4 分钟

输入需要用到html的 input 标签来实现

HTML + JS

HTML

使用 input 标签
1
<input></input>
添加 id 方便JS定位元素
1
<input id="user_input"></input>

添加提示

<div>
  请在此处输入
  <input id="user_input"></input>
</div>

效果如下:

请在此处输入:

JS

通过id定位输入框

1 2	`let user_input = document.getElementById('user_input').value; alert(user_input);`

绑定事件到按钮(html)

1	`<button onclick="let user_input = document.getElementById('user_input').value;alert(user_input);">展示输入内容</button>`

*把事件打包成函数

<button onclick="show_input()">展示输入内容</button>
<script>
  function shwo_input(){
    let user_input = document.getElementById('user_input').value;
    alert(user_input);
  }
</script>

效果

前端显示

账号:

密码:

代码

<p>账号: <input id="input_1"></input></p>
<p>密码: <input id="input_2" type="password"></input></p>
<button onclick='show()'>确认</button>

<script> 
function show(){
  let acc = document.getElementById('input_1').value 
  let psw = document.getElementById('input_2').value 
  // console.log(input) 
  if ( acc && psw ){
   alert(`账号: ${acc} \n密码: ${psw}`) 
  } else {
   alert('账号或密码未输入!')
  }
 }
</script>

美化

前端显示

Account

Password

代码

<div class="input_container">
  <input type="text" id="acc" placeholder=" ">
  <label for="acc">Account</label>
</div>
<div class="input_container">
  <input type="password" id="psw" placeholder=" ">
  <label for="psw">Password</label>
</div>
<style>
  .input_container {
    display: flex;
    place-items: center;
    position: relative;
    --color: #114514;
    --color-focus: #191981;
    margin-bottom: 16px;
  }
  .input_container > input {
    border: 0;
    outline: 0;
    border: 0.1rem solid var(--color);
    padding: 0.5rem;
    border-radius: 6px;
  }
  .input_container > label { 
    position: absolute;
    top: 50%;
    left: 0.7rem;
    transform: translateY(-55%);
    color: var(--color);
    transition: 0.2s;
    background: white;
  }
  .input_container > input:focus,
  .input_container > input:not(:placeholder-shown) {
    border: 0.1rem solid var(--color-focus); 
  }
  .input_container > input:focus + label,
  .input_container > input:not(:placeholder-shown) +label {
    color: var(--color-focus);
    top: 0;
    font-size: .8rem;
  }
</style>

<div style="position: relative;padding:8px"><button data-component="text" onclick="confirm()" style="font-size: 16px; background-color: #1f883d; border-color: #1f232826; color: #ffffff; border-radius: .375rem; display: inline-flex; justify-content: center; align-items: center; height: 2rem; padding: 0 .75rem; border-style: solid; border-width: 1px;">Confirm</button></div>

<script>
  function confirm(){
    let acc = document.getElementById('acc').value
    let psw = document.getElementById('psw').value
    if ( acc && psw ){
      alert(`账号: ${acc} \n密码: ${psw}`) 
    } else {
      alert('账号或密码未输入!')
    }
  }
</script>