当前,如果此人enter在文本区域内按下,则将提交表单。
好,我想要那个。
但是当他们输入shift+时enter,我希望textarea移至下一行:\n
我该如何JQuery
尽可能简单地用普通JavaScript 做到这一点?
e.shiftKey
。
shiftKey
属性。
当前,如果此人enter在文本区域内按下,则将提交表单。
好,我想要那个。
但是当他们输入shift+时enter,我希望textarea移至下一行:\n
我该如何JQuery
尽可能简单地用普通JavaScript 做到这一点?
e.shiftKey
。
shiftKey
属性。
Answers:
我建议使用以下Tim的解决方案更好:https : //stackoverflow.com/a/6015906/4031815
我想你可以做这样的事情。
编辑:更改代码以工作,无论插入位置
代码的第一部分是获得插入符的位置。
参考:如何从头开始以字符为单位,在文本区域中插入符号(而非像素)的位置?
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(), rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
然后在Shift+ Enter在一起时相应地替换textarea值,如果Enter单独按下则提交表格。
$('textarea').keyup(function (event) {
if (event.keyCode == 13) {
var content = this.value;
var caret = getCaret(this);
if(event.shiftKey){
this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
event.stopPropagation();
} else {
this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);
$('form').submit();
}
}
});
这是一个演示
event.keyCode == 13
),我想您可能也想要event.preventDefault()
而不是event.stopPropagation()
。
event.stopPropagation()
我停下来的意思,他可能已经写入提交表单一些其他的代码。
event.stopPropagation()
,这将防止事件在DOM上冒泡,但不会阻止按键执行其默认行为,即插入换行符(尽管实际上在keyup
我的建议下event.preventDefault()
也不会这样做)。
carent
未定义的错误,如果我将其更改为插入符号,它将添加2条新行
首先,Enter除非您有脚本使之在文本区域内按下,否则不会提交该表单。这是用户期望的行为,建议不要更改它。但是,如果必须执行此操作,最简单的方法是找到使Enter表单提交并对其进行更改的脚本。该代码将类似于
if (evt.keyCode == 13) {
form.submit();
}
...您可以将其更改为
if (evt.keyCode == 13 && !evt.shiftKey) {
form.submit();
}
另一方面,如果由于某种原因无法访问此代码,则即使插入符号不在文本末尾,也需要执行以下操作以使其在所有主流浏览器中都能正常工作:
jsFiddle:http : //jsfiddle.net/zd3gA/1/
码:
function pasteIntoInput(el, text) {
el.focus();
if (typeof el.selectionStart == "number"
&& typeof el.selectionEnd == "number") {
var val = el.value;
var selStart = el.selectionStart;
el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
el.selectionEnd = el.selectionStart = selStart + text.length;
} else if (typeof document.selection != "undefined") {
var textRange = document.selection.createRange();
textRange.text = text;
textRange.collapse(false);
textRange.select();
}
}
function handleEnter(evt) {
if (evt.keyCode == 13 && evt.shiftKey) {
if (evt.type == "keypress") {
pasteIntoInput(this, "\n");
}
evt.preventDefault();
}
}
// Handle both keydown and keypress for Opera, which only allows default
// key action to be suppressed in keypress
$("#your_textarea_id").keydown(handleEnter).keypress(handleEnter);
为什么不只是
$(".commentArea").keypress(function(e) {
var textVal = $(this).val();
if(e.which == 13 && e.shiftKey) {
}
else if (e.which == 13) {
e.preventDefault(); //Stops enter from creating a new line
this.form.submit(); //or ajax submit
}
});
这是使用ReactJS ES6的最简单方法
shift+ enter换行在任何位置
enter 受阻
class App extends React.Component {
constructor(){
super();
this.state = {
message: 'Enter is blocked'
}
}
onKeyPress = (e) => {
if (e.keyCode === 13 && e.shiftKey) {
e.preventDefault();
let start = e.target.selectionStart,
end = e.target.selectionEnd;
this.setState(prevState => ({ message:
prevState.message.substring(0, start)
+ '\n' +
prevState.message.substring(end)
}),()=>{
this.input.selectionStart = this.input.selectionEnd = start + 1;
})
}else if (e.keyCode === 13) { // block enter
e.preventDefault();
}
};
render(){
return(
<div>
New line with shift enter at any position<br />
<textarea
value={this.state.message}
ref={(input)=> this.input = input}
onChange={(e)=>this.setState({ message: e.target.value })}
onKeyDown={this.onKeyPress}/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>
我发现此线程正在寻找一种控制Shift +任何键的方法。我将其他解决方案粘贴在一起,以使此组合功能完成我需要的工作。我希望它可以帮助其他人。
function () {
return this.each(function () {
$(this).keydown(function (e) {
var key = e.charCode || e.keyCode || 0;
// Shift + anything is not desired
if (e.shiftKey) {
return false;
}
// allow backspace, tab, delete, enter, arrows, numbers
//and keypad numbers ONLY
// home, end, period, and numpad decimal
return (
key == 8 ||
key == 9 ||
key == 13 ||
key == 46 ||
key == 110 ||
key == 190 ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
});
});
如果有人仍然想知道如何在没有jQuery的情况下执行此操作。
的HTML
<textarea id="description"></textarea>
Java脚本
const textarea = document.getElementById('description');
textarea.addEventListener('keypress', (e) => {
e.keyCode === 13 && !e.shiftKey && e.preventDefault();
})
香草JS
var textarea = document.getElementById('description');
textarea.addEventListener('keypress', function(e) {
if(e.keyCode === 13 && !e.shiftKey) {
e.preventDefault();
}
})
我通过添加contenteditable true而不是使用textarea来使用div。
希望可以帮到您。
$("#your_textarea").on('keydown', function(e){//textarea keydown events
if(e.key == "Enter")
{
if(e.shiftKey)//jump new line
{
// do nothing
}
else // do sth,like send message or else
{
e.preventDefault();//cancell the deafult events
}
}
})
这对我有用!
$("#your_textarea").on('keydown', function(e){
if(e.keyCode === 13 && !e.shiftKey)
{
$('form').submit();
}
});
ng-keyup
在angularJS中使用指令,仅在按键时发送一条消息,Enter
并且Shift+Enter
只会换一行。
ng-keyup="($event.keyCode == 13&&!$event.shiftKey) ? sendMessage() : null"