光标直接在占位符后面进行表单输入。引导程序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>我有什么：图片 - 当前这是我想要的一个例子：图像 - 目标

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/。

仅当用户尝试从输入字段 => 中删除值属性中设置的初始值，paypal.me/或者尝试在字符串索引开始和结束范围内的子字符串位置上键入或输入时，才会触发此操作。

请参阅下面的代码...

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，则可以在保存响应时将用户名附加到 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>