如何 select 重视 selectize 的焦点?
How to select value on focus for a selectize?
我想 select 重视 selectize。
此时,我可以单击并删除值,但我希望单击(焦点)应该 select selectize 元素的所有值字符串。
您可以在创建新活动时看到 Google 日历是如何工作的。
在我这边,如果我点击时间 selectize 元素,那么它应该 select 所有值字符串并且 selection 可以被删除或更新为新字符串,例如Google.
我的时间selectize元素如下。
// php
<div class="select-beast is-hide-selectize-arrow select-event-time-end">
<select name='event_time_end' class='control is-normal select-time' required>
<?php echo TimeHelper::get_times(); ?>
</select>
</div>
// php
function get_times ($default = '19:00', $interval = '+30 minutes') {
$output = '';
$current = strtotime('00:00');
$end = strtotime('23:59');
while ($current <= $end) {
$time = date('H:i', $current);
$sel = ($time == $default) ? ' selected' : '';
$output .= "<option value=\"{$time}\"{$sel}>" . date('h:i A', $current) .'</option>';
$current = strtotime($interval, $current);
}
return $output;
}
...
//jquery
<script>
const $selected_time_start = $('.select-beast select[name="event_time_start"]').selectize({
create: true
});
const selectize_event_start = $selected_time_start[0].selectize;
</script>
我尝试的是像下面这样使用焦点事件和 select method。
但是没用。
$('.select-beast select[name="event_time_start"]').focus(function() { $(this).select(); } );
经过 3 个多小时的研究,我找到了最相关的答案。
我需要将 selectize 版本更新到最新版本并使用 select_on_focus
插件。
插件在这里。 https://github.com/selectize/selectize.js/tree/master/src/plugins/select_on_focus
使用方法:
如果您使用的是 jQuery,则可以使用 selectize 的独立版本。
...
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" rel="stylesheet">
</head>
<body>
...
<select class="selectize"></select>
...
</body>
<script>
const $selectize = $('.selectize').selectize({
options: options,
plugins: ['select_on_focus'],
...
});
</script>
你知道怎么导入插件了吧?
我想 select 重视 selectize。
此时,我可以单击并删除值,但我希望单击(焦点)应该 select selectize 元素的所有值字符串。
您可以在创建新活动时看到 Google 日历是如何工作的。
在我这边,如果我点击时间 selectize 元素,那么它应该 select 所有值字符串并且 selection 可以被删除或更新为新字符串,例如Google.
我的时间selectize元素如下。
// php
<div class="select-beast is-hide-selectize-arrow select-event-time-end">
<select name='event_time_end' class='control is-normal select-time' required>
<?php echo TimeHelper::get_times(); ?>
</select>
</div>
// php
function get_times ($default = '19:00', $interval = '+30 minutes') {
$output = '';
$current = strtotime('00:00');
$end = strtotime('23:59');
while ($current <= $end) {
$time = date('H:i', $current);
$sel = ($time == $default) ? ' selected' : '';
$output .= "<option value=\"{$time}\"{$sel}>" . date('h:i A', $current) .'</option>';
$current = strtotime($interval, $current);
}
return $output;
}
...
//jquery
<script>
const $selected_time_start = $('.select-beast select[name="event_time_start"]').selectize({
create: true
});
const selectize_event_start = $selected_time_start[0].selectize;
</script>
我尝试的是像下面这样使用焦点事件和 select method。 但是没用。
$('.select-beast select[name="event_time_start"]').focus(function() { $(this).select(); } );
经过 3 个多小时的研究,我找到了最相关的答案。
我需要将 selectize 版本更新到最新版本并使用 select_on_focus
插件。
插件在这里。 https://github.com/selectize/selectize.js/tree/master/src/plugins/select_on_focus
使用方法:
如果您使用的是 jQuery,则可以使用 selectize 的独立版本。
...
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" rel="stylesheet">
</head>
<body>
...
<select class="selectize"></select>
...
</body>
<script>
const $selectize = $('.selectize').selectize({
options: options,
plugins: ['select_on_focus'],
...
});
</script>
你知道怎么导入插件了吧?