在輸入表單中構(gòu)建帶有占位符文本的輸入表單并將光標(biāo)（開(kāi)始輸入的位置）直接放在占位符文本之后的正確方法是什么？占位符文本是只讀的。這是我的代碼：<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>我有什么：圖片 - 當(dāng)前這是我想要的一個(gè)例子：圖像 - 目標(biāo)
2 回答
萬(wàn)千封印
TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
設(shè)置您的輸入值以顯示您的目標(biāo)文本paypal.me/。默認(rèn)情況下，這會(huì)將輸入值設(shè)置為paypal.me/。然后使用一些 javascript 將光標(biāo)放置在輸入字段內(nèi)字符串的末尾。這可以通過(guò).setSelectionRange() 設(shè)置輸入字段的開(kāi)始和結(jié)束位置來(lái)實(shí)現(xiàn)。因此，您可以創(chuàng)建一個(gè)函數(shù)，然后將輸入的值和長(zhǎng)度傳遞到該函數(shù)中。用于focus()將焦點(diǎn)設(shè)置在指定元素上。您可以在舊版瀏覽器的元素上使用createTextRange()、moveEnd()、moveStart()和。select()
編輯： （2020 年 8 月 1 日）
在輸入字段的事件監(jiān)聽(tīng)器中添加了一個(gè)條件input，以檢查輸入字段在特定子字符串范圍內(nèi)的值是否使用paypal.me/運(yùn)算符 ->設(shè)置為目標(biāo)字符串!。這可以防止用戶將值添加到第一部分或輸入字段的設(shè)置子字符串范圍之間的任何位置，并進(jìn)行檢查以確保輸入字段值的定義子字符串之間的字符槽確實(shí)設(shè)置為所需的值價(jià)值觀。
if (!paypal.value.substring(0,10).includes('paypal.me/'))基本上是說(shuō)，如果 ID 輸入字段的值paypal不包含在輸入值的定義子字符串中，paypal.me/則在條件中 { paypal.value = 'paypal.me/'; }--> 將輸入字段的值設(shè)置為等于字符串paypal.me/。
僅當(dāng)用戶嘗試從輸入字段 => 中刪除值屬性中設(shè)置的初始值，paypal.me/或者嘗試在字符串索引開(kāi)始和結(jié)束范圍內(nèi)的子字符串位置上鍵入或輸入時(shí)，才會(huì)觸發(fā)此操作。
請(qǐng)參閱下面的代碼...
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貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊
你不能只使用自動(dòng)對(duì)焦并分割用戶名部分嗎？
input[type=text], select {
border: 0;
}
paypal.me/<input type="text" name="username" id="username" autofocus>
這樣每次輸入的只是用戶名，而不是 URL + 用戶名。如果您需要完整的 URL，則可以在保存響應(yīng)時(shí)將用戶名附加到 URL 的末尾，但是您可以這樣做。我提供了一個(gè)非常簡(jiǎn)單的演示，展示了它的外觀。
EDIT
我做了一個(gè)稍微更詳細(xì)的說(shuō)明，以更好地展示這是如何工作的。
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 關(guān)注
- 200 瀏覽
添加回答
舉報(bào)
0/150
提交
取消