<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Addr Selecter</title>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
//下拉选择内容，填充到input中
$(document).ready(function(){
Input_ValidateCN('input_txt');
$('#combDiv').on('change','#comb_selector',function(){
var selectedValue = $('#comb_selector').val();
var selectedText = $('#comb_selector').find("option:selected").text();
$('input[name="option_value"]').val(selectedValue);
$('input[name="input_txt"]').val(selectedText);
})
});
function Input_ValidateCN(name_selector) {
var inputor = document.getElementById(name_selector);
if(getBrowser() === 'IE') {
var isInputZh = false;
window.addEventListener('compositionstart', function (e) { isInputZh = true;}, false);
window.addEventListener('compositionend', function (e) { isInputZh = false; console.log('compositionend',document.getElementById(name_selector).value )}, false);
} else {
var isInputZh = false; //是否处于输入进程中 ,若在输入进程中等待输入不触发事件
inputor.addEventListener('compositionstart', function (e) { isInputZh = true;}, false); //输入进行中
inputor.addEventListener('compositionend', function (e) { isInputZh = false; console.log('compositionend', this.value)}, false); //输入已结束
//inputor.addEventListener('input', function (e) { if (isInputZh) return; ValidateNum(valDom);}, false); }
}
inputor.addEventListener('input', function (e) { if (isInputZh) return; console.log('compositionend', this.value)}, false);
}
function getBrowser () {
const userAgent = navigator.userAgent
if (userAgent.indexOf('OPR') > -1) {
return 'Opera'
}
if (userAgent.indexOf('Firefox') > -1) {
return 'FF'
}
if (userAgent.indexOf('Trident') > -1) {
return 'IE'
}
if (userAgent.indexOf('Edge') > -1) {
return 'Edge'
}
if (userAgent.indexOf('Chrome') > -1) {
return 'Chrome'
}
if (userAgent.indexOf('Safari') > -1) {
return 'Safari'
}
}
</script>
</head>
<body>
<form>
<h4>组合下拉框</h4>
<div id="combDiv">
<label>请输入或者选择：</label>
<input type="hidden" name="option_value">
<input type="text" name="input_txt" id="input_txt" placeholder=" 请选择或者录入内容"
style="position:absolute;width:270px;height:19px;z-index:100;" autocomplete="off" />
<select id="comb_selector" style="width:298px;height:25px;z-index:90;">
<option value="" selected>--请选择用途--</option>
<option value="001">选项1</option>
<option value="002">选项2</option>
</select>
</div>
</form>
</body>
</html>
网友评论