Question

我有这个HTML表单

more on top ...
<div class="form-group row">
    <label for="phone" class="col-sm-3 col-form-label">Phone</label>
    <div class="col-sm-9">
        <input type="text" name="phone" id="phone" class="form-control" >
    </div>
</div>
more on bottom ...

我在这里输入数字，例如1671133639，如果它可以验证，那么我在该数字前添加 880 。但是它是在输入字段之前添加的，而不是输入文本。我的意思是最终结果应该是：8801671133639

我正在使用的

JS代码：

if (phone.value == "") { 
    alert("Phone number is required"); 
    phone.focus(); 
    return false; 
} else if (!phoneRegex.test(phone.value)) {
    alert("Phone number must contain only numerical value."); 
    phone.focus(); 
    return false; 
} else if ( phone.length > 13 ) {
    alert("Invalid phone number is given."); 
    phone.focus(); 
    return false; 
} else {
    var text    = document.createTextNode('+88');
    var child   = document.getElementById('phone');
    child.parentNode.insertBefore(text, child);
}

Answer 1

不要使用insertBefore，而是将新字符串分配给输入的value属性。

const text    = '+88';
const child   = document.getElementById('phone');
const value = child.value;
phone.value = text + value;

document.querySelector('button').addEventListener('click', function() {
    const text = "+88";
    const phoneInput = document.getElementById('phone');
    const value = phoneInput.value;
    phoneInput.value = text + value;
})

<input type="text" value="1671133639" type="string" id="phone">
<button>Append Phone Code</button>

使用JavaScript验证后，在输入框文字前添加数字

1 个答案: