javascript/jQuery 如何获得鼠标右键黏贴在input中的值并用alert弹窗显示出来

Posted 2023-04-22

这个问题主要是监听 onpaste (鼠标右键粘贴或 Ctrl + V)。

如果 input 值为空，那么很简单，在 onpaste 之后获取 input 的值就是被粘贴的内容。

但如果 input 内已经有内容，用户选择在中间部位粘贴，或者选择一部分内容后再粘贴 (替换粘贴)，那实施起来就比较复杂。下面是完整的代码

function getSelectionBoundary(el, start)
var property = start ? "selectionStart" : "selectionEnd";
var originalValue, textInputRange, precedingRange
, pos, bookmark, isAtEnd;

if(typeof el[property] == "number")
return el[property];

else if(document.selection && document.selection.createRange)
el.focus();
var range = document.selection.createRange();
if(range)
if(document.selection.type == "Text")
range.collapse(!!start);

originalValue = el.value;
textInputRange = el.createTextRange();
precedingRange = el.createTextRange();
pos = 0;
bookmark = range.getBookmark();
textInputRange.moveToBookmark(bookmark);
if(/[\\r\\n]/.test(originalValue))
try
range.move("character", 1);
isAtEnd = (range.parentElement() != el);

catch(ex)
isAtEnd = true;

range.moveToBookmark(bookmark);
if(isAtEnd)
pos = originalValue.length;

else
textInputRange.text = " ";
precedingRange.setEndPoint("EndToStart",
textInputRange);
pos = precedingRange.text.length - 1;
textInputRange.moveStart("character", -1);
textInputRange.text = "";


else
precedingRange.setEndPoint("EndToStart", textInputRange);
pos = precedingRange.text.length;

return pos;


return 0;


function getInputSelection(ele)
var start = getSelectionBoundary(ele, true),
end = getSelectionBoundary(ele, false);
return
start: start,
end: end,
length: end - start,
text: ele.value.slice(start, end)
;


function detectPaste(ele, callback)
ele.onpaste = function()
var sel = getInputSelection(ele);
var initialLength = ele.value.length;
window.setTimeout(function()
var val = ele.value;
var pastedTextLength =
val.length - (initialLength - sel.length);
var end = sel.start + pastedTextLength;
callback(
start: sel.start,
end: end,
length: pastedTextLength,
text: val.slice(sel.start, end),
replacedText: sel.text
);
, 1);
;

以上都是监听 onpaste 和获取粘贴内容的函数，下面是用法。（如果你只是使用，不需要理解上面代码的内容）

window.onload = function()
// 获取要监听的 input 或 textarea
var content = document.getElementById("content");

// 开始监听，第二个参数为回调函数，返回一个对象，其中包括
// start: 光标开始位置，end: 粘贴后光标位置
// length: 粘贴内容的长度，replacedtext: 被替换的内容
// text: 这个就是被粘贴的内容
detectPaste(content, function(pasteInfo)
alert(pasteInfo.text);
);
;

<input type="text" id="content" value="" />

参考技术A 粘贴后会触发change事件
通过$(this).val()取出事件触发后input内的值
$('input').on('change',function()
alert($(this).val());

); 参考技术B 貌似不能把，你只能把用户选择后复制到文本框的值给alert出来，这样是检测文本中值是否变化，变了就弹。 参考技术C <input id="tt" type="text"/>
如果是这样的话，直接用alert($("#tt").val())就可以了。 参考技术D try it see see.试试看

$("#input_id").bind('change',function(e)
alert(this.val()) ;

);

将毫秒转换为日期 (jQuery/JavaScript)

【中文标题】将毫秒转换为日期 (jQuery/JavaScript)

【英文标题】：Converting milliseconds to a date (jQuery/JavaScript)

【发布时间】：2011-06-08 02:16:36

【问题描述】：

我有点闲逛，但我会尽量保持清楚 -

我很无聊，所以我正在制作一个“shoutbox”，我对一件事有点困惑。我想获得输入消息的时间，并且我想确保我获得了服务器时间，或者至少确保我没有获得用户的本地时间。我知道没关系，因为这东西除了我不会被任何人使用，但我想彻底。我环顾四周并测试了一些东西，我认为这样做的唯一方法是获取自 1970 年 1 月 1 日 00:00:00 UTC 以来的毫秒数，因为那将是每个人都一样。

我就是这样做的：

var time = new Date();
var time = time.getTime();

返回一个类似1294862756114的数字。

有没有办法将1294862756114 转换为更易读的日期，例如DD/MM/YYYY HH:MM:SS？

所以，基本上，我正在寻找与 PHP 的 date(); 函数等效的 JavaScript。

【问题讨论】：

如果你不想拥有当地时间，那你为什么要使用javascript呢？你不应该在服务器上做吗？

签出这个库 -> datejs.com (签出 toString())

@fazo - 这或多或少是一个旨在帮助我更好地使用 JS 的项目，所以我试图尽可能少地使用 PHP（希望只是将数据读/写到文件中） )。

我认为他的意思是他想相应地格式化时间字符串？

?/?/1970 or whatever it is -> Unix Epoch, 1970-01-01T00:00:00Z

【参考方案1】：

var time = new Date().getTime(); // get your number
var date = new Date(time); // create Date object

console.log(date.toString()); // result: Wed Jan 12 2011 12:42:46 GMT-0800 (PST)

【讨论】：

分两步做有什么好处吗？ （首先计算时间，然后将其用作日期的参数）。仅通过 var date = new Date(); 得到的结果不是完全相同吗？

OP 是关于从毫秒数转换为 Date 对象，这就是第二行所做的。第一行只是获得合理毫秒数的一种方式。你也可以只做var date = new Date(0);。

时间必须是数字，而不是字符串

【参考方案2】：

如果您想要自定义日期格式，我提供a simple function：

var now = new Date;
console.log( now.customFormat( "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss#" ) );

以下是支持的令牌：

token:     description:             example:
#YYYY#     4-digit year             1999
#YY#       2-digit year             99
#MMMM#     full month name          February
#MMM#      3-letter month name      Feb
#MM#       2-digit month number     02
#M#        month number             2
#DDDD#     full weekday name        Wednesday
#DDD#      3-letter weekday name    Wed
#DD#       2-digit day number       09
#D#        day number               9
#th#       day ordinal suffix       nd
#hhhh#     2-digit 24-based hour    17
#hhh#      military/24-based hour   17
#hh#       2-digit hour             05
#h#        hour                     5
#mm#       2-digit minute           07
#m#        minute                   7
#ss#       2-digit second           09
#s#        second                   9
#ampm#     "am" or "pm"             pm
#AMPM#     "AM" or "PM"             PM

这是代码：

//*** This code is copyright 2002-2016 by Gavin Kistner, !@phrogz.net
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
Date.prototype.customFormat = function(formatString)
  var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhhh,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
  YY = ((YYYY=this.getFullYear())+"").slice(-2);
  MM = (M=this.getMonth()+1)<10?('0'+M):M;
  MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
  DD = (D=this.getDate())<10?('0'+D):D;
  DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][this.getDay()]).substring(0,3);
  th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
  formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
  h=(hhh=this.getHours());
  if (h==0) h=24;
  if (h>12) h-=12;
  hh = h<10?('0'+h):h;
  hhhh = hhh<10?('0'+hhh):hhh;
  AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
  mm=(m=this.getMinutes())<10?('0'+m):m;
  ss=(s=this.getSeconds())<10?('0'+s):s;
  return formatString.replace("#hhhh#",hhhh).replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
;

【参考方案3】：

您只需使用Datejs 库即可将日期转换为您想要的格式。

我已经进行了几次测试，它确实有效。

下面是一个 sn-p 说明如何实现这一点：

var d = new Date(1469433907836);

d.toLocaleString(); // expected output: "7/25/2016, 1:35:07 PM"

d.toLocaleDateString(); // expected output: "7/25/2016"

d.toDateString();  // expected output: "Mon Jul 25 2016"

d.toTimeString(); // expected output: "13:35:07 GMT+0530 (India Standard Time)"

d.toLocaleTimeString(); // expected output: "1:35:07 PM"

【讨论】：

这些示例不需要 Datejs，它们是 JavaScript 的一部分。但它们有效并且完全满足答案。谢谢！

【参考方案4】：

以下是一个 sn-p，可让您将日期格式化为所需的输出：

var time = new Date();
var time = time.getTime();

var theyear = time.getFullYear();
var themonth = time.getMonth() + 1;
var thetoday = time.getDate();

document.write("The date is: ");
document.write(theyear + "/" + themonth + "/" + thetoday);

【讨论】：

JavaScript 中不需要分号。但是，使用它们的最佳实践。有时，没有它们，语句的含义可能会改变（但在这种情况下不会）。一些代码审查员热心地爱他们，并为他们的存在而战。为简单起见，最好始终使用它们。

【参考方案5】：

尝试使用此代码：

var datetime = 1383066000000; // anything
var date = new Date(datetime);
var options = 
        year: 'numeric', month: 'numeric', day: 'numeric',
    ;

var result = date.toLocaleDateString('en', options); // 10/29/2013

查看更多：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

【参考方案6】：

尝试使用此代码：

var milisegundos = parseInt(data.replace("/Date(", "").replace(")/", ""));
var newDate = new Date(milisegundos).toLocaleDateString("en-UE");

尽情享受吧！

【参考方案7】：

试试这个：

var time = new Date().toJSON();

【参考方案8】：

一行代码。

var date = new Date(new Date().getTime());

或

var date = new Date(1584120305684);

【参考方案9】：

所以你需要在 getTime() 之后将那个 var time 传递给另一个 new Date() 这是我的例子：

var time = new Date()
var time = time.getTime()
var newTime = new Date(time)
console.log(newTime)
//Wed Oct 20 2021 15:21:12 GMT+0530 (India Standard Time)

这里的输出是我的日期时间标准格式，它将是国家/地区格式

如果您想要其他格式，那么您可以在 var newTime 上应用另一个日期函数 喜欢

var newTime = new Date(time).toDateString()
console.log(newTime)
//Wed Oct 20 2021

【参考方案10】：

/Date(1383066000000)/

function convertDate(data) 
    var getdate = parseInt(data.replace("/Date(", "").replace(")/", ""));
    var ConvDate= new Date(getdate);
    return ConvDate.getDate() + "/" + ConvDate.getMonth() + "/" + ConvDate.getFullYear();

【讨论】：

请尝试解释为什么这个答案可以解决问题，避免只发布代码。

【参考方案11】：

假设日期为毫秒日期为1526813885836，因此您可以使用以下示例代码以字符串形式访问日期：

console.log(new Date(1526813885836).toString());

为了清楚起见，请参见下面的代码：

const theTime = new Date(1526813885836);
console.log(theTime.toString());

【参考方案12】：

使用日期js

new Date().toString('yyyy-MM-d-h-mm-ss');