直接在占位符后使用光标进行表单输入。引导程序 4

Question

在占位符文本之后直接使用光标（开始输入的位置）在输入表单中构建带有占位符文本的输入表单的正确方法是什么？

占位符文本是只读的。

这是我的代码：

<form action="functions/paypal_link.php" method="POST">
  <div class="form-group">
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text rounded-0 text-right"><img src="/images/pp.png" width="25px"> https://paypal.me/</span>
      </div>
      <input type="text" id="paypal" name="paypal" class="form-control form-control-lg" value="" required>
    </div>
  <div class="form-row">
    <div class="col">
      <center><input type="submit" value="Submit Paypal Username" class="btn btn-primary"></center>
    </div>
  </div>
</form>

我有什么：

Image - Current

这是我想要的示例：

Image - Goal

Answer 1

设置您的输入值以显示您的目标文本paypal.me/。默认情况下，这会将输入值设置为paypal.me/。然后使用一些 javascript 将光标放在输入字段中字符串的末尾。这可以使用.setSelectionRange() 来设置输入字段的开始和结束位置。因此，您可以创建一个函数，然后将输入的值和长度传递给该函数。使用focus() 将焦点设置在指定元素上。您可以在旧版浏览器的元素上同时使用 createTextRange()、moveEnd()、moveStart() 和 select()。

已编辑： （2020 年 8 月 1 日）

---

在您的输入字段的input 的事件侦听器中添加了一个条件，以检查您的输入字段在某个子字符串范围内的值是否使用运算符-> ! 设置为目标字符串paypal.me/。这可以防止用户将值添加到第一部分或输入字段的设置子字符串范围之间的任何位置，并检查以确保在您定义的输入字段值的子字符串之间的字符槽确实设置为所需的价值观。

if (!paypal.value.substring(0,10).includes('paypal.me/')) 基本上表示如果您的 ID paypal 输入字段的值不包含在值输入的定义子字符串 paypal.me/ 内，那么在条件内， { paypal.value = 'paypal.me/'; } --> 将输入字段的值设置为等于字符串paypal.me/。

这只会在用户尝试从输入字段中删除 value 属性中设置的初始值时触发 => paypal.me/ 或者如果他们尝试在字符串索引 start 和结束范围。

见下面的代码...

let paypal = document.getElementById('paypal');
let placement = paypal.length;

function setCaretPosition(el, pos) {
  // Modern browsers
  if (el.setSelectionRange) {
    el.focus();
    el.setSelectionRange(pos, pos);

    // IE8 and below
  } else if (el.createTextRange) {
    let range = el.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

/////////////////////////////////////////////////////////////////////////////
//                              EDIT:                                      //
// add event listener to detect if your values string does not include the //
// target string within a defined set of start and end indices within your //
// string, if not we force the value to equal the string `paypal.me/`      //
/////////////////////////////////////////////////////////////////////////////
paypal.addEventListener('input', function() {
  if (!paypal.value.substring(0,10).includes('paypal.me/')) {  
    paypal.value = 'paypal.me/';
  }
});

setCaretPosition(paypal, paypal.value.length);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<form action="functions/paypal_link.php" method="POST">
  <div class="form-group">
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text rounded-0 text-right"><img src="/images/pp.png" width="25px"> https://paypal.me/</span>
      </div>
      <input type="text" id="paypal" name="paypal" class="form-control form-control-lg" value="paypal.me/" required>


    </div>
    <div class="form-row">
      <div class="col">
        <center><input type="submit" value="Submit Paypal Username" class="btn btn-primary"></center>
      </div>
    </div>
</form>

Answer 2

你不能只使用自动对焦并拆分用户名部分吗？

input[type=text], select {
  border: 0;
}

paypal.me/<input type="text" name="username" id="username" autofocus>

这样每次输入的只是用户名，而不是 URL + 用户名。如果您需要完整的 URL，您可以在保存响应时将用户名附加到相同的末尾，但是您可以这样做。我提供了一个非常简单的演示，说明它的外观。

EDIT

我做了一个稍微详细一点的，以便更好地展示它是如何工作的。

input[type=text],
select {
  border: 0;
  outline: none;
  font-family: 'Roboto', serif;
  font-size: 14px;
}

.wrap {
  width: 50%;
  border: 1px black solid;
  border-radius: 15px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row;
  margin-left: auto;
  margin-right: auto;
}

p {
  font-family: 'Roboto', serif;
  font-size: 14px;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
<div class="wrap">
  <p>paypal.me/<input type="text" name="username" id="username" autofocus></p>
</div>