javascript - jquery中的某些事件调用后如何自动单击我的textarea
问题描述
我的项目有问题。我想在用户通过 iframe 添加 youtube 视频后自动单击我的文本区域。但不知道如何实现这一点。
这是我正在尝试的
document.getElementById('youtube_select').onclick = function () {
var youtube = jQuery('input[name=youtube]:checked').val();
if(youtube) {
if(typeof(clickedElement) != "undefined"){
clickedElement.after('<iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/' + youtube + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><br></p>');
} else {
jQuery('.medium-editor-element').append('<iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/' + youtube + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><br></p>');
}
jQuery("#textarea").focus();
}
}
这是我的文本区域中添加的元素
<div class="col-xs-12">
<div class="textarea-field editor">
<div class="form-control textarea medium-editor-element" id="medium-editor-1538377761979" onkeyup="auto_grow(this)" placeholder="Start writing" name="content" cols="50" rows="10" medium-editor-textarea-id="medium-editor-1538377761979" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="1" medium-editor-index="b41ef202-8466-bd3b-2659-be0c9528b8ef" data-placeholder="Type your text" style="height: 84px;" data-medium-focused="true"><p>uiiuiuiu</p><p><br></p><iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/EU7PRmCpx-0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe><p><br></p></div>
<textarea class="form-control textarea medium-editor-hidden" id="textarea" onkeyup="auto_grow(this)" placeholder="Start writing" name="content" cols="50" rows="10" medium-editor-textarea-id="medium-editor-1538377761979" style="height: 0px;"></textarea>
</div>
<div class="toolbox active">
<a href="#" id="quick-add"><img src="http://192.168.1.122/bemediav2/public/img/frontend/plus.png" alt=""></a>
<div class="toolbox-option">
<ul>
<li><a id="quick-close" href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-close.png" alt=""></a></li>
<li><a href="javascript:void(0)" id="uploadimage"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-img.png" alt=""></a></li>
<li><a data-toggle="modal" data-target="#upload_Media" href="javascript:void(0)"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-video.png" alt=""></a></li>
<li><a href="javascript:void(0)" data-toggle="modal" data-target="#uploadlink"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-link.png" alt=""></a></li>
<li><a href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-audio.png" alt=""></a></li>
<li><a href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-add.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
youtube_select id 在这里。它在模态中。当我点击upload_Media时点击了模态
<div class="modal fade modal-vcenter" tabindex="-1" role="dialog" id="upload_Media">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>{{ __('sidebar.searchyoutube') }}</h3>
<a href="#" class="modall-close" data-dismiss="modal"><img src="{{ URL::to('/') }}/img/frontend/close-icon.png" alt=""></a>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<div class="searchbox_wrapper">
{!! Form::open(['method'=>'POST', 'id'=>'youtubesearch']) !!}
<div class="search_block">
<input type="text" class="form-control" id="search" name="search" placeholder="{{ __('sidebar.searchyoutube') }}">
<input type="button" class="post_submit3" onclick="youtubesearch();">
</div><!-- search_block-->
{!! Form::close() !!}
</div>
<div class="image_container">
<div class="tab_row">
<div class="scroll_section scroll_block">
<div class="row">
<div class="image_list">
<ul class="youtube_search"></ul>
</div><!-- image_list-->
</div>
</div><!-- scroll_section-->
<div class="bottom_shape"></div>
</div> <!-- tab_row-->
</div><!-- search_block-->
<div class="media_bottom">
<input type="button" class="submit_select" id="youtube_select" value="{{ __('sidebar.use') }}" data-dismiss="modal">
<a href="#" class="cancel_btn2" data-dismiss="modal">{{ __('sidebar.cancel') }}</a>
</div><!-- media_bottom-->
</div>
</div>
</div>
</div>
</div>
</div>
我已经从这里选择了我的 youtube 视频
@foreach($youtubes->items as $youtube)
<li class="image_height">
<input type="radio" name="youtube" value="{{ $youtube->id->videoId }}" id="{{ $loop->iteration }}" />
<label class="checkbox_common" for="{{ $loop->iteration }}"><img src="{{ $youtube->snippet->thumbnails->default->url }}" alt=""/></label>
<label class="check_tick"><img src="{{ URL::to('/') }}/img/frontend/check-tick.svg" alt=""/></label>
</li>
@endforeach
我用于获取视频的控制器是
public function youtubesearch(Request $request) {
$developer_key = 'myKey';
$youtubes = [];
if ($request->get('search')) {
$format_keyword = implode("+", explode(" ", $request->get('search')));
$url = "https://www.googleapis.com/youtube/v3/search?q=$format_keyword&order=viewCount&part=snippet&type=video&maxResults=32&key=" . $developer_key;
$arr_result = json_decode(file_get_contents($url));
if (isset($arr_result->items) && !empty($arr_result->items)) {
$youtubes = $arr_result;
}
}
$view = View::make('frontend.include.youtube', compact('youtubes'));
$html = $view->render();
$response = array('html' => $html);
return response()->json($response);
}
解决方案
试试这个,一个检查任何选项 textarea 将被聚焦
jQuery("input[name=youtube]").change(function() {
if(this.checked) {
jQuery('#textarea').focus();
}
});
推荐阅读
- c# - Automapper,不支持的映射
- php - 如何更改列中的项目?(我知道一些 php 但我不是专家)
- python - 什么触发了 KeyError:'SQLALCHEMY_TRACK_MODIFICATIONS'?
- jenkins - jenkins - 脚本在控制台中需要几秒钟,但在管道中需要几分钟/小时
- android - 我应该在引用其父 Activity ViewModel 的片段中删除 LiveData 的观察者吗?
- javascript - 如何在夜间值守中迭代元素时在元素中设置值
- r - 过滤掉非英文文本
- python - 等宽字符边界框的确切尺寸是多少(特别是 courier new),我如何在 Python 中基于每个图像找到它?
- javascript - 模式中数组中的猫鼬更新对象
- c# - Word 加载项对象始终为空