提交后如何使输入字段添加文本

时间:2019-09-06 23:02:15

标签: javascript html

我想知道是否有可能在用户输入所需信息后,在输入字段中添加一些文本。例如用户在搜索栏中输入youtube.com,然后输入https://www

3 个答案:

答案 0 :(得分:1)

您可以使用事件侦听器来更改输入字段的值。

使用RegEx来确定是否已设置字符串(https://www.(例如,通过复制和粘贴URL)。

这里是一个例子:

document.getElementById('url').addEventListener('keyup', (e) => {
  if (!/^(https:\/\/www.)/.test(e.target.value) && e.target.value) {
    e.target.value = `https://www.${e.target.value}`;
  }
});
<input type="text" id="url">

答案 1 :(得分:0)

使用模糊事件 您可以在用户离开输入字段后运行功能

请参阅https://www.w3schools.com/jsref/event_onblur.asp

答案 2 :(得分:0)

您需要操纵使用javascript的用户输入。如果用户按下了提交按钮,则不要立即提交输入,请使用event.preventDefault()停止默认操作,然后在需要时使用AJAX手动提交,然后根据需要更改用户输入。

function manuallySubmit(event){
   event.preventDefault();
   // manipulate  input here
   var input = document.getElementById("input").value;
   input = "changed value " + input;
   console.log(input);
   
   /* AJAX POST request
   
   let xhr = new XMLHttpRequest();
    xhr.open('POST','location',true);
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8');
    data = 'input='+(input);
    xhr.send(data);
    
    */
   // window.location.href="newlocation" if you want to redirect
}
<form onsubmit="manuallySubmit(event)" action='#' method="POST">
  <input type="text" name="input" id="input" /><br/>
  <input type="submit">
</form>