在輸入表單中構建帶有占位符文本的輸入表單并將光標（開始輸入的位置）直接放在占位符文本之后的正確方法是什么？占位符文本是只讀的。這是我的代碼：<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>我有什么：圖片 - 當前這是我想要的一個例子：圖像 - 目標
2 回答
萬千封印
TA貢獻1891條經驗 獲得超3個贊
設置您的輸入值以顯示您的目標文本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>
智慧大石
TA貢獻1946條經驗 獲得超3個贊
你不能只使用自動對焦并分割用戶名部分嗎？
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>
- 2 回答
- 0 關注
- 191 瀏覽
添加回答
舉報
0/150
提交
取消